February 5, 2019 at 1:39 pm #416858
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.February 6, 2019 at 12:00 am #416917
Math NotermansMember115 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.
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 😉
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.
MathFebruary 6, 2019 at 3:53 am #416937
Tim KMember295 pts@timk
You might check this sample:
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.February 8, 2019 at 11:39 am #417259
Thanks, Tim and Math. I’ll have time to play with this again next week.February 11, 2019 at 11:03 am #417381
Thanks anyway. I appreciate your both taking the time to try to help.February 12, 2019 at 12:26 am #417490
Math NotermansMember115 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.February 13, 2019 at 9:13 am #417553
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.
Attachments:February 13, 2019 at 3:32 pm #417618
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.February 14, 2019 at 9:46 am #417701
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.
Attachments:February 14, 2019 at 11:27 am #417733
Thank you, Darrel.February 14, 2019 at 4:01 pm #417763
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.)February 14, 2019 at 5:14 pm #417792
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.February 14, 2019 at 5:47 pm #417813
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.
February 15, 2019 at 3:38 pm #417859
- This reply was modified 4 months, 1 week ago by Darrel Somoza. Reason: bolded some text
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.February 15, 2019 at 4:49 pm #417862
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?
You must be logged in to reply to this topic.