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

#417701 Score: 0
Profile photo of Darrel Somoza
Darrel Somoza
Member
contributor
friend finder
beginner
intermediate
junior moderator
advanced
wise owl
curious george
profile
209 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.