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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #425340 Score: 0
    Profile photo of cpliu
    cpliu
    Member
    beginner
    intermediate
    contributor
    curious george
    wise owl
    Group Member
    2 pts
    @cpliu

    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,

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

    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.

    This post has received 1 vote up.
    #425373 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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.

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

    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.

    #425424 Score: 0
    Profile photo of cpliu
    cpliu
    Member
    beginner
    intermediate
    contributor
    curious george
    wise owl
    Group Member
    2 pts
    @cpliu

    Thanks for the advice. I will give it a try.

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

    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.

    #425434 Score: 0
    Profile photo of cpliu
    cpliu
    Member
    beginner
    intermediate
    contributor
    curious george
    wise owl
    Group Member
    2 pts
    @cpliu

    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,

    #425440 Score: 0
    Profile photo of H I
    H I
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    @hi1182

    I use this css at title level:

     

    .mejs-overlay-button{
    visibility:hidden;
    }

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

    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.

    #425639 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    21 pts
    @CarlFink

    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.

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

    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.

     

    #425744 Score: 0
    Profile photo of cpliu
    cpliu
    Member
    beginner
    intermediate
    contributor
    curious george
    wise owl
    Group Member
    2 pts
    @cpliu

    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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.