MP4 to stay at last frame when done

cpliu
cpliu Community Member Posts: 237
We converted some Flash content into MP4 and play the video in Lectora. We'd like to have the video stays at the last frame when completed instead of going back to the first frame with a play button on top.

Is there a way to achieve that?

Thanks,

Comments

  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    The only way I know is to use an event shortly before the end and show a screenshot of the last frame or pause the video. Showing an image may be better, because the video can play on and stop under it. Then you can add actions to the image to replay.
  • klaatu
    klaatu Community Member Posts: 988
    Tim, the mediaElement API has a showPosterWhenEnded video parameter. I'm a little busy right now to fight with Lectora to figure out how to inject it into the exported content (hence why I almost always use an external player - it's way easier and you have total control, but that's another story). You can probably figure it out in a few minutes. I think adding a poster image (shows before video is played) and making this parameter true would be the best solution for cpliu. If you don't figure it out first I'll try when I have time. Sounds like a fun puzzle.
  • klaatu
    klaatu Community Member Posts: 988
    Actually an even better way to do this would be to set the autoRewind property to false. I'll post a sample in a little while.
  • cpliu
    cpliu Community Member Posts: 237
    Thanks for the advice. I will give it a try.
  • klaatu
    klaatu Community Member Posts: 988
    The easiest way to do this is with a simple little hack.

    In your exported content html folder you will find a file called "trivantis-media.js". Open this in notepad (or an html editor, if you code).

    Do a search and look for "this.playerOptions = {". Add a line under it just above the first entry "enablePluginDebug: false," with the following:

    autoRewind: false,

    Typed exactly like the above, including the comma. These lines should now look like this

    this.playerOptions = {
                                 autoRewind: false,
                                 enablePluginDebug: false,

    Save the file and now your videos in this lesson will stop on the last frame and not rewind. If you want to lose the superimposed large play button on the video this can be accomplished using CSS.
  • cpliu
    cpliu Community Member Posts: 237
    This works. Thank you so much Darrel. There is still a white play button that shows up at the end. Is there a way to get rid of that?

    Thanks,
  • hi1182
    hi1182 Community Member Posts: 3
    I use this css at title level:

     

    .mejs-overlay-button{
    visibility:hidden;
    }
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • carlfink
    carlfink Community Member Posts: 971 ✭ Legend ✭
    I have used a trick similar to Darrel's, modifying media.js. One potential issue is that this will affect all videos in your course. They'll all remain on the last frame, rather than rewinding.
  • klaatu
    klaatu Community Member Posts: 988
    Good point, Carl. I assumed that was the behavior cpliu preferred. I usually don't use the built in player unless it's for something really simple. I almost always add my own, it free's you up to use the MediaElement API in its entirety without wrestling Lectora for control. If you look at the API you'll see just how much you lose using the built in version.

     
  • cpliu
    cpliu Community Member Posts: 237
    Thanks again for the help. It works. Initially I thought there is no need to add jquery myself since there is jquery-1.10.2.min.js loaded. I got OnShowRunJS: TypeError: Object error when loading the page. Then I followed the step;  downloaded the jquery 3.4.1 slim and loaded to the external HTML. Then it worked without the error message.

    I think the play icon is important for videos, but we prefer not to go back to the initial state with a play icon. The video was originally SWF content. We tried to mimic the behavior of the SWF instead of videos. So the current way works exactly as we wanted.

    Thanks,

    cpliu