Custom Lectora Video Controls

By Joseph Suarez

Video can be an engaging enhancement to an eLearning course built with Lectora. However, there may be times when video needs to be controlled without the default video playback controls. These controls can also visually clash with an eLearning course’s template or theme. For example, a red and white course template will create a distracting visual contrast to Windows Media Player’s black and blue controls. Fortunately, Lectora offers another way to control video playback.

By default in web-based courses, different video file types are played back with their corresponding browser plug-ins, as shown below. As you can see, the different controllers even clash with each other, resulting in an inconsistent user experience if multiple video formats are present. 

With Lectora, it’s possible to overcome these inconsistencies and create a custom set of basic video controls using only the button wizard and a few actions. If you aren’t familiar with Lectora’s button wizard, you can access it through a button on the toolbar or through the file menu under “Tools.” From there, you can easily create some buttons labeled with what each does, but this isn’t a very elegant solution.

Looking back at each of the video player default controllers, you’ll notice the button symbols are all the same. This is because we universally understand the triangle pointing right to signify “play,” the square as “stop,” and so on. Fortunately, we can recreate these symbols with Lectora’s button wizard using Webdings.

Webdings is a symbol font installed on all Windows PCs, which includes some useful icons including the traditional video player control icons (play, stop, rewind, fast-forward, & record). So by changing the font to Webdings while creating buttons with Lectora’s button wizard, you’ll achieve the effect of the universal play controller with the following keys:

As you can see in this example, the buttons are much more attractive with rewind, play, pause, and stop in icon form. However, in the Title Explorer window, the buttons were automatically named according to the keys necessary to create the Webdings. For sanity’s sake and for proper alt tags, it’s best to rename them according to what they do (“play video,” “stop video,” etc.).

With the buttons created, it’s just a matter of adding the video control functionality. In Lectora, this is accomplished through actions, and in the case of video controls they are very straight forward.

Each button you create in Lectora has a tab in its properties named “On Click.” It’s perfectly fine to add an action here, although you might want to leave this tab blank and only add actions to buttons in the Title Explorer window. This way, you won’t run into problems down the road if you need to add multiple actions, and it’s apparent from the button’s expandable [+] icon that there are actions associated with it.

You will need to have your video added to the page if it isn’t already, and disable the properties “Auto Start” and “Display Video Controller” by unchecking them. Then, with the play button highlighted, add an action by clicking the Add Action button on the toolbar or using the file menu (Add > Action). Then edit the properties of the action to the following:

Action Name:  Play Video
On:  Mouse Click
Action:  Play
Target:  YourVideo.mp4

If you test your page now, the button should start playing the video when clicked. Cool huh? Repeat these steps for the stop and pause buttons and change the action from “Play” to either “Stop” or “Pause.”

Notice how the stop button returns the video to the beginning. With this is mind, we can combine stop and play actions together to form a rewind effect. This way when the rewind button is clicked, it stops the video and plays it again from the beginning simultaneously. Just make sure the stop action occurs first (above) the play action.

With just these four basic controls and a creative use of Lectora’s button wizard, it’s possible to create a custom set of Lectora video controls that could visually fit your course’s theme or template. To take this idea even further, try using invisible buttons placed as “hot spots” over an image of a television or remote control. There are lots of creative possibilities.

Have you used any similar Lectora tricks with Webdings, the button wizard, or video controls? Leave a comment, and let us know.