Full-screen video via JavaScript

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

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.

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

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.

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.

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.

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.

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

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.)

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.

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.

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.

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?

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

Carl, you're missing it please take another look. It is in both files I uploaded. Keep in mind that in the exported sample, External-Player.zip you will find the correct index.html in the extern\webwin40 folder. You seem to be looking in the wrong place. Do not mess with the Lectora stuff.

Also, in the second zip (CustomizedPlayer) look in, or better yet, do a search in the index.html file. The preload attribute it is certainly there in the video tag.

What I posted is exactly what you indicated you needed for that project. I wouldn't mess to much with it. It is a concise as possible and simply reusable, even for a novice.

If you are planning on adding an entire copy of the MediaElement.js source files keep in mind that without knowing which files to include/remove it will be way heavier than necessary. That's why I stripped out everything that was not needed. Why not just work with Lectora's, it's the same thing. If you want to work with Lectora's you'll just have to figure out how to traverse the dom to get at it.

One more thing I noticed: if I place the HTML output on a specific (internal) IIS server, all the player controls except the skipback you wrote for me (thank you!) are not shown? It works fine locally and on SCORM Cloud. Some IIS setting?

Question: is there any way to turn autoplay on? I hate to keep bothering you but I don't see any clear docs on the mediaelement object. Can you point me to some? I suppose I could try to decode the normal Lectora code ....

What I wasn't getting was that you specifically mean the index.html inside the Web Window object. Yes, that worked. I was also able to add a "progress" attribute to it to display the progress bar.

The one thing I still can't do is the equivalent of the "OnDonePlaying" action in Lectora. I'm sure it is possible, but it isn't obvious to me how without a lot of research. I can't find any documentation in several searches on exactly what events the mediaelement.js player generates (and specifically what they're named), and also it's not clear to me how to have Lectora catch them. I know that's documented somewhere.

Somewhere.

I'm also going to have to re-encode all the video to fit on the page since the web window doesn't like being resized, but that's trivial.

Thanks.

There's a lot there so I will work on trying to answer it all. Most of it is doable (Auto play, onEnd action). Not too sure about the issue on your server, I don't think the information services should be an issue. Keep in mind that returning the progress bar will give the participant the ability to skip ahead. I can't take the credit for the skip back script as it was lifted directly from the demo, however, you're welcome for any help I have provided. What is happening when you resize the web window? I did not have an issue. Remember, you'll need to change the video size (in the web window html.index) to match the height and width of your video. From there, you should be able to make the web window size in Lectora match that height and width.

I'll work on the auto-play and having the MediaElement player send an onEnd action to Lectora's action system. I'm a little busy right at this moment so it might take a bit to get back, keep checking.

Continuing to add: I just used your modified mediaelements code on another course. I had encoded the DVD video down to 480x360. If I make the web window that exact size, it works (although of course the video quality itself is quite low). If I increase the size of the web window without changing the script, the web window resizes, but the video within it remains 480x360 and leaves a huge gap. That's what I was referring to when I wrote about it not wanting to resize--the video itself does not scale, only the div (?) it's enclosed in. (Obviously, I haven't looked into how Lectora implements web windows.)

Darrel, while I really appreciate your volunteering to do all that, I was really asking for a link to the mediaelements.js documentation so I could do it myself. I like learning this stuff.

When I resized the window in testing, the video within did not resize, and the controls were not reachable because the window clipped the video (and thus the controls were were outside the frame of the webwindow, off the bottom).

undefined

Edit: I can put the progress bar in, but then cover it with an invisible rectangle, right?

Hmm, not sure what is going on with your resizing issue. As long as the actual video file height and width match those in the web window html.index. undefined tag and the size of web window in Lectora there should be no issue. Just make sure the actual video is the size you want the web window in Lectora to be. Boy, that sounds confusing, I hope I explained it sufficiently.

As far as where to look to learn (which is highly commendable) go to mediaelementjs.com. You will find usage and the valuable API info top right (or just use these links).

If you are not used to calling Lectora actions from JavaScript it can be tricky, especially if you're exporting your project with the troublesome 'seamless play' selected. I include the attached, not to do the work for you, but to provide additional material to assist in your learning. I always find examples of what I am trying to do extremely helpful. I left the progress bar in so that you can do what you don't want your students to do, drag to right before the end of the video, so you can see the end of video action fire off without having to endure that animation one more time (the very last scene is bad enough to have to watch).

By the way, the Auto play property will work just fine once it's uploaded to your server. It wont work locally. If you do a lot of custom work I strongly suggest you set up a local server, such as WAMP on your authoring computer so you can see exactly how your work will function on a real server. Okay, I'm going off on a tangent. Time to refocus.

You can call an action directly from JavaScript by calling the function action123() where 123 is the number of your action. You can fire off a group (one or more actions) by calling runGroup_og123() where 123 is the number of your group. If you are using 'seamless play' you will have to include parent (parent.runGroup_og123()) before the function call to properly target it (Good explanation why is explained elsewhere in the forum). I commented my code to show you where this goes.

In the sample I attached, because I was not attaching the action to anything, I added a group and put the action in the group. I could have called the action directly (action299 in my sample) however, I decided to call the group (og290 in my sample) instead. I could have placed any number of actions in that group. By the way, the Lectora awt is in the zip as well.

That's about it. If you have a difficult time figuring out or finding instruction on the JavaScript (I didn't put that many comments) let me know and I will write something up.

Good luck and I hope this helps.

OK, my participation here is now the forum equivalent of a run-on sentence. I just can't stop adding stuff.

Where would you like bug reports? Because I just found one, and I don't see any mention of it being fixed in V18. (Not a video bug, a responsive design bug.)

I had found that site, actually, but the docs involved are very ... let's say, as a technical writer who has written and edited many manuals over some decades now, I would not be proud of that documentation. I think I'll look into buying a book. I have a credit sitting around somewhere for a free computer ebook.

I'll try your file this afternoon. Thank you, again.

Interesting behavior. The fullscreen button on the player works fine when published as HTML, or when I preview the page in the browser. However, when I publish to AICC it works neither in SCORM Cloud nor in Success Factors LMS. In those settings (in the exact same browser) the fullscreen button does nothing except change its own appearance when clicked.

Annoying.

Solved the resizing issue, at least partly.

In the file mediaelement-and-player.min.js (which is weirdly semi-obfuscated JavaScript) there is the string

0,stretching:"auto",classPrefix:"mejs__",enableKeyboard:!

(I write "string" because as I commented upthread, the entire file seems to write a long, complex JavaScript package as a single line.)

If you swap "auto" to "responsive" then resizing the Web Window also resizes the video. Otherwise, not.

One incompatibility: if you put scrollbars on "Auto" it causes an ugly white border around the bottom and right of the edges of the video. If you leave that off it just letterboxes (black borders) whenever the Web Window aspect ratio is not identical to the video's.

I should clarify: my intent with "Responsive" was both to allow resizing the video by dragging the resize handles on the Web Window, and also to allow programmatic size changes to emulate fullscreen by just setting the window to fill the browser. I'd also have to handle the window resizing event for the browser window itself, of course, to make the video continue to fit.

Obviously I haven't done that yet, but that's where my head was going.

It may look it but it is not obfuscated. The "min" in the name indicates the script is minimized (standard in JavaScript). It has all whitespace, comments and formatting removed as it is not needed for the interpreter and slows things down. If you download the player source files from their website you can look at the un-minimized version which is easy to read and heavily commented. This is very helpful to understand how it works - if you understands JS.

Yes, you can set the "stretching" parameter to 'auto', 'responsive' or 'fill'. I didn't include this opting instead to have you size the video and player the same. I suppose if you are building in responsive mode in Lectora you'd want that set to responsive or maybe fill depending on your needs. Read through the API, this player is loaded with awesome features and some very talented people have contributed valuable plugins (like skip back). The application programming interface is always a good thing to become familiar with when using any JavaScript library.

Odd behavior in the LMS. I don't think that should be happening. What you describe is the feature triggering (hence the change in the icon) but it is not going full screen, correct? Until I can test, the only thing I can think of is that your LMS is set to open a course in a new window and maybe that is somehow effecting the full screen feature from working properly? Interesting.

You can accomplish most, if not all, of these things by manipulating the built in mediaelement player, however, the folks at Trivantis/StoneCalibre have made it ridiculously difficult by the way they implement it (don't get me started..). It is, therefore, MUCH easier to just pop in your own version of the player when needed to give yourself simple and complete control over all it's features.

Oh, I forgot to mention. It is not good practice to change anything inside a third party library (i.e. mediaelement.min.js). The "stretching" parameter should be added inside the undefined tag like autoplay, height, width, etc. For example stretching = "responsive".

One other thing I left out above is that stretching can also be set to "none".

PSA time:

I think I’ll look into buying a book.

So I found this offer. That's a total of 17 O'Reilly books on web dev, including 7 at least partly about JavaScript. I paid $15 for the total. Even if less than half will ever be useful to me it's a good deal, so I thought I'd mention it.