Button to go to video event

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.

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

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.

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.

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;"

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:

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

undefined

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.

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.

undefined

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

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 !

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.

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?

I tried the file you've posted and the video plays if I click it. The button doesn't show (of course) and the cursor stays an arrow instead of a finger but the video plays and pauses.

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

Testing both in the same browser ? Because might act difference in another browser...

Thank you, Tim. I'm going to have to figure out why its not working like that on my computer. I'm pretty certain that the default of MediaElement.js is to function by clicking the video just as you describe it working. I also remember being able to do that with other video's, so something awry on my end. Thanks again.