Explore the community Forums Lectora Lectora Questions & Answers Button to go to video event

Tagged: , ,

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #337824 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    In an effort to replace the need for multiple screenshots and on-click actions, I’m trying to create buttons that jump to a specific event in a video. I’ve created multiple events in the video that correspond to the place that correspond to various actions the learner would take on the page.

    For example, when the user hovers over the button, the video jumps to a stop event and on a click, jumps to a different event in the video. In looking at actions for both the video and the button, I don’t really see anything that would perform this type of function. I thought this would reduce load times since the video would likely be smaller than the combined number of images I would need to create it with screen shots. Thanks for the help!

    #338630 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    117 pts
    @jvalley4735

    Why wouldn’t the play, pause, or stop actions in regards to media not work?  Can you share your files?

    #338644 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    Hi Jennifer – I think I may have realized part of my mistake, as I had the events in the video to stop instead of pause. That was one part of it. The main thing I’m trying to attempt is to set up buttons that go to a specific time stamp or event in the video. In the example, there is a transparent button over the “search” in the image. Clicking that brings the video forward and plays to display what is under the search section. The blue button on the page, if clicked AFTER the Searches button, will play the video to show the items under the MNYTD section.

    However, clicking either button again will just play the video to the next pause event. What I would like is for the learner to be able to click on the button and have it go directly to the event that matches instead of just moving to the next event.

    #338660 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    117 pts
    @jvalley4735

    I think you’ll find much more control using external javascript.  I’m not really familiar with the code but this is the explanation I got from one of our developers: In a run a javascript action simply do audio40.setTrackTime(120);   audio40 being the object’s publish name and 120 being the time you want set in seconds.

    #338704 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    I had a feeling you might say that about using JavaScript 🙂 Thanks for checking into it and reminding me that I could probably use a good course in JavaScript with the way some of my design mind thinks.

    #338773 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    Jennifer – Do you have any more insight on the RunJavaScript action? I’ve tried a couple methods and can’t quite get it to work. When the button is clicked, it does not jump to the time in the video. I tried running the exact text in the post with both the video HTML name (video139979) and HTML element name (when I viewed source on the page, which added “media” to the name. I also tried it with document.getElementById(“video139979media”) all to no avail.

    In the HTML source, the file information shows up as:

    <video id=”video139979Media” name=”video139979Media” src=”media/task_panel_video.mp4″ width=”178px” height=”510px”><source type=”video/mp4″ src=”media/task_panel_video.mp4″></video>

    I can re-attach if needed to help with more info. Thanks!

    #338841 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    117 pts
    @jvalley4735

    Here’s a response from my inside source  “He was actually pretty close, just has a typo it should be Media not media as IDs are case sensitive.
    document.getElementById(“video51Media”).currentTime = 35;”

    #338937 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    Jennifer, you and your “inside source” are fantastic life savers. Thank you so much! There is ONE last question on the video that I’m hoping can be done. When the video goes to that particular point on the timeline, I added pause events to keep it on that time point. I’m wondering if there’s a way to hide the play button that comes up when it gets to that point in the video. I don’t want the learner clicking on the video itself to play it. They will be using buttons to move to the different points. I tried both the regular an default controller options to no avail.

    My suspicion is that I need a custom player skin, which I may be able to track down and muddle through installing.

    #338940 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    355 pts
    @timk

    You can hide the button by adding a HTML Extension, type: Meta tags. Click Edit and enter:

    <style>
    .mejs-layers{
    display:none;
    }
    </style>

    mind, it’s still possible to click the video to play / pause. You can put a transparent shape over it to prevent the users from clicking it.

     

    #339048 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    Jennifer, your inside source was close but you still have a typo. Either of these will work (change the 39 to match your element’s id):

    document.getElementById(‘video39Media’).setCurrentTime(10);

    document.getElementById(‘video39Media’).currentTime = 10;

    I suggest using the first one because this is the property that is in the MediaElement.js documentation.

    The second one is what you were shooting for but you have an extra quote after the semi-colon.

    All Javascript is case sensitive, not just ID’s. This can drive you crazy if you are not careful as can an extra quote  trust me I’ve spent many an hour debugging JS.

    Tim, I don’t think you need a transparent blocker when setting the mejs-layers class to display:none. It effectively hides the play icon on the video so there is nothing to click to make it play/pause as long as the play bar is not shown, of course.

    One other thing I’ll mention because, well, I always do. While in this case it works okay and I know you’re only doing this for expediency, I do not suggest using meta-tags to add style information, or anything other than actual meta-data. I’ll show you why. The main reason for this has to do with the order of CSS precedence. Placing the CSS in a meta-tag will place it very high in the head of the document, well ahead of the linked external style sheets. That sets its Origin and effects the CSS order of precedence. CSS loaded after (such as in the external links), depending on specificity, will supercede that in the meta-tag. The only reason why it works is because Lectora does not have that class in the files trivantis-player.css or trivantis.css which load after.

    Try this – Play the attached to see what you and the inside source suggest works. Then find the trivantis.css file and edit it to add the following at the end:

    .mejs-layers {
    display:block;
    }

    Save. (Note that examining the index.html will show that trivantis.css is loaded by an external link AFTER the meta-tag that holds your style info.) Now double click the index.html file to run it. Notice that your style information no longer works. This is because they both have the same specificity (.mejs-layers) and the one in the meta-tag loads first. Because of the cascade, the style in the linked sheet that loads after supersedes it and viola display:block reigns.

    I know I sound like a broken record but I think it’s important for others who may be new to web design to understand why doing something like this might not give you the outcome you’re looking for.

     

    Attachments:
    1. Title-23.zip
    #339077 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    355 pts
    @timk

    Hi Darrel,

    thanks for the explanations.

    I’ve tested my CSS and although the play button isn’t displayed, I can click the video to play / pause.

    Tim

    #339141 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    117 pts
    @jvalley4735

    I need to start using the quote feature in the Community.  For some reason it doesn’t hold the original formatting which is not good when you need something to be particular.  Thanks for the assist @Klaatu !

    #339211 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    That’s odd, Tim. It doesn’t for me. Is anyone else getting the video to play by clicking on it in my posted sample above?

    #339290 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    355 pts
    @timk

    I was only referring to the CSS I posted to “display:none;”. With only that, the video stays clickable (at least for me).

    #339297 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    Tim. Please try the sample I posted. It contains exactly what you suggested and only what you suggested. If you get the same results (which you would expect) then I may have a setting or something different on my end. Thanks.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.