Explore the community Forums Lectora Lectora Questions & Answers Full-screen video via JavaScript

Tagged: ,

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #416858 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    13 pts
    @CarlFink

    Does anyone have sample JS code to make a video full-screen? I have to block the built-in controls (because we can’t let the student skip ahead in the video).

    While I’m at it, can we create a button to go back 30 seconds, but not let the student go ahead at all?

    Thanks.

    #416917 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    110 pts
    @mnotermans5114

    As Lectora uses the MediaElement JS (mjes) code to build its player, your best bet to get that done is checking their documentation for something to get that done.
    http://www.mediaelementjs.com/

    You will have to check how the mediaplayer is used in Lectora. If the HTML and divs they are in are conform MediaElements standards, you can use it as is and this solution described here might work. ( A lot of mights and ifs, but i didnot test 😉
    https://stackoverflow.com/questions/10027234/make-mediaelement-js-fill-its-container-and-fullscreen/33851741

    If not, and Trivantis and Lectora made some extra divs or even tables to encapsulate the mediaplayer, you might have to create and add a custom player of your own to get this working.

    Kind regards,

    Math

    #416937 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
    262 pts
    @timk

    You might check this sample:

    https://community.trivantis.com/contest/love-from-to/

    It uses an audio file of course but it may help you find the access point to the mediaelements player. It was built in Lectora 16.1.2.

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

    Thanks, Tim and Math. I’ll have time to play with this again next week.

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

    So looking at this today, it seems that the Trivantis player (which per Math is really an instance of mediaJS) has no predictable name unless you manually create it in JavaScript … which means that the only way to control it is by making it entirely in manually-written script. I don’t actually mind doing that myself, but my co-developers are not scripters and I don’t want to mystify them, so for this project we will have to make do with the oddly-limited palette of controls available in Lectora.

    Thanks anyway. I appreciate your both taking the time to try to help.

    #417490 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    110 pts
    @mnotermans5114

    One other option thinking of now. You could use an external HTML object to embed videoplayer/mediaplayer code. I do it all the time to stream Vimeo. That way you can use all external code(s) and create a custom videoplayer.
    For any non-scripters its still easy to reuse.

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

    Carl, is this what you are looking for? It is pretty easy to reuse. No coding knowledge necessary. If it suits your needs, all you need to do is replace the video (leave it in the same place) and change the name of the video in the embedded index.html. You can do that in notepad. If this will work for you (or anyone else) and you want more detailed step by step instructions let me know and I will post them.

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

    Darrel, that indeed looks like exactly the sort of thing I meant.

    I’d be grateful for more info. I believe I once mentioned to you in person that I wished there was better documentation for JS in Lectora.

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

    Overview: We are going to add our own copy of a customized MediaElement.js video player using the Web Window option. It will be totally separate and have nothing to do with the built-in version.

    First you need to prepare the customized player:
    1. Create a folder named Custom Player somewhere on your hard drive that is easy to find.
    2. Unpack the CustomizedPlayer.zip file into that folder.
    3. Add the video file you want to play into this folder with the other files. Make a note somewhere of your video’s height and width.
    3. In a text editor, Notepad works fine, open the Index.html file. You will have to change the extension from Text Documents to All Files to see the index.html file.
    4. The code may not be formatted in an easy to read manner so do a search (Ctrl-F) for source src.
    5. Change the name of the video, currently BigBuckBunny.mp4, to the name of the video you moved into the folder (leave the quotes intact).
    6. Do another search for Width. Change the number, currently 750, to the width of your video (leave the quotes intact).
    7. Do another search for Height. Change the number, currently 421, to the height of your video (leave the quotes intact).
    Now to add the player into your Lectora project:
    1. In your Lectora project on the page you want to include the video select Insert – Web Window.
    2. In the pop-up box that opens set the following options:
    Window Source: Local web-based content
    File Path: Browse to the Custom Player folder you unpacked the zip into and select the Index.html file.
    **Ensure that the Include all files and sub-folders option is checked. This is very important.
    You should now see something in the preview. Don’t worry if it does not fit in the preview box.
    3. Click OK.
    4. The web window is added and is most likely very small. Select it and then select the tab Position & Size. Make the Width and Height the width and height of your video.
    5. Drag the player anywhere on the page you want it. If you’re using Responsive Design select each view and drag to where you want it as necessary.

    That’s it. You should be able to preview the video. To add another player on another page all you need to do is add the additional video to the same Custom Player folder and then follow the same instructions. Do not delete any videos (except BigBuckBunny, if you wish) from the Custom Player folder as they are needed until the content is published.

    Hope this helps. If there any questions, feel free to ask.

    If you are interested in how I put together the player that is a different story. This one was fairly simple to do as it is just a slightly edited copy of the skip-back plugin sample containing only the essential support CSS, JS and image files. Most of the customized players I build require changing CSS, JS and graphics depending on the required functionality and desired look. This takes quite a bit of work outside of Lectora first and a tutorial will take time to write. If there is enough interest I will begin, time permitting. Note that it would be written assuming you understand and can code HTML5.

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

    HTML5 is relatively easy. It’s JavaScript that annoys me. I was trained on FORTRAN 4 (actually Waterloo FORTRAN IV, or WATFIV, which has structured programming elements). I got pretty good at several other languages, but I always hated C and C-like languages. (There are reasons I’m not a programmer today, and one is that I don’t like the currently-fashionable languages.)

    Thank you, Darrel.

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

    By the way: have you considered adding more fine-grained Actions for media to Lectora itself, since you’re using the MediaJS player? Stuff like a variable that represents the video length, going to a specific point (e. g. 3:21), the “go forward/back a number of seconds” that you implemented for me, a variable representing the position of the playhead, full-screen and restore?

    To do it transparently, you’d set the [media].playHeadPosition variable to some number indicating the desired position in seconds. (Thinking “aloud” here.)

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

    I don’t suppose there’s any way (in the built-in player or the separate Web Window) to preload video? I used to do that all the time in Flash to work around bad network connections. I have (just) tried placing the video, hidden, on a preceding page, but from the Chrome Developer Tools it looks as if the file doesn’t load until it is actually visible.

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

    Yes, you can. In the index.html file search for preload. It will be within the <video> tags. It is currently set to none. Change that to auto.

    • This reply was modified 2 days, 23 hours ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: bolded some text
    #417859 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    13 pts
    @CarlFink

    Yes, you can. In the index.html file search for preload. It will be within the <video> tags.

    I’m afraid that this is not the case. Neither the built-in player nor the one you uploaded to this thread contains the string “preload=none”. Nor does either index file contain <video> tags.

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

    On further investigation, at least in 17.0.6 (which as Debian GNU/Linux user I think of as “Lectora Stable”) the preload attribute seems to be set in in trivantis-mep.js, which is not especially easy (or possible) to decode by sight-reading. In particular it appears to consist of one very long line, 176K long. It also seems to be using code from a somewhat elderly version of jQuery, but of course I’m forced to use an old version of Lectora.

    Maybe I’ll try over the weekend to drop in a current MediaPlayer.js?

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

You must be logged in to reply to this topic.