Explore the community Forums Lectora Lectora Questions & Answers MP4 to stay at last frame when done Reply To: MP4 to stay at last frame when done

#425447 Score: 0
Profile photo of Darrel Somoza
Darrel Somoza
friend finder
junior moderator
wise owl
curious george
209 pts

The above will work, however, it will remove it initially as well.

The easiest way to do this would be to use jQuery.

This will initially show the overlayed play button and then when the video is played and reaches the end it will not show. Keep in mind that once you add this code you will need to re-export and then do the little hack I showed you above as re-exporting will remove it.

To add jquery first go to jQuery.com. Click the download jQuery button and then select the minified version (currently at version 3.4.1). Remember where you save this as you will need to browse to it in a moment.

In Lectora select the root of your project in the Title Explorer tab and then in the Insert tab select HTML Extension.

Select the added extension and then the Properties tab.

In the HTML Extension part of the ribbon hit the drop-down for type and select Header Scripting.
Next, select the file drop-down and then Browse for file. Here is where you need to select the jquery file you just downloaded.

I usually change the name of the extension in the Title Explorer to jQuery. Now you can use jQuery in your project.

Now to get rid of the overlay.

We will need to get the HTML name of the video player. To do this select the video player in the Title Explorer then the properties tab in the ribbon.
Under the video part of the ribbon you’ll see a little arrow icon in the bottom right corner of the video section. Clicking it will open a small window with more information. Take note of the HTML name near the bottom and close the little window. In order to properly target the correct object you need to add the word “Media” (no quotes) to the HTML name. So if your video players name was video40 you will need to target video40Media (the “M” is capitalized).

Now add a run javascript action to the video player. Set it to on show and run JavaScript. In the JavaScript window under Action and Target add the following script (replacing video40Media with your target, if necessary.) Note that the hash tag, or number sign to us old people, is necessary. Also, if you plan on copy and pasting any code from this forum you will need to individually delete and replace each quote because they do not copy over correctly.
$(‘#video40Media’).on(‘ended’, function(e) {

$(“div.mejs-overlay-play”).css(“visibility”, “hidden”);


That should be it. Export and do the little hack from before. It should now work as you wish. One thing to note is although the overlayed button is gone your students will still be able to click on the video to replay it. There are ways to prevent this as well but thats another long winded response. Let me know if you need it.

You might want to forgo (or is it forego?) all this and just use H I’s method if you don’t need the overlay to begin with. But why do something easy when you can do something hard and learn more, I say…lol.