HTML5 Tutorial:

Interactive HTML5 Video

Part 5: Using script to control HTML5 video in Opus Pro

timing HTML5 video illustration

In Opus Pro v9.75 and above you can use the standard Opus actions to play and pause the video. However, this section of the tutorial explains the syntax to use JavaScript instead, which then allows even greater control including, for example, the ability to jump to different points in the video or to write your own video scrubber. Even if you are not a programmer you may still find this section useful to give you some insight how to adapt the example files.

HTML5 Video Functions

All the functions and properties of standard HTML5 audio and video elements (see W3Schools.com for details) also apply to HTML5 video in Opus as long as you use the syntax _DWPub.PageName.VideoObjectName.videoElement().function() to access the video as an Opus element.

This means that we can use the video.pause() function to pause the video when we display the questions so that the user does not miss any key content while the questions are being answered.

Pause the Video

There is no stop function for HTML5 video so we need to use video.pause(). Note the brackets after the word pause which indicate that this is a function They need to be present for the script to work.

We want the video to pause when the first question appears so we put an On Show trigger on the Quiz Frame then go to the Programming tab and add a JavaScript action. You will now need to type the script required into the box provided.

script to pause an HTML5 video

Restart the Video

We can use video.play() in a similar way to restart the video once the questions have been answered. In this case we place the action on another On Show trigger on the delayFrameV which we are using to create a slight pause after users have clicked the Confirm Answers button on the final question.

script to play an HTML5 video

Jump to Specific Video Frames

You can also use the currentTime property to set the video to a particular position. For example: if you want to reset a video you can set currentTime=0 and then use video.load() to reload the video at the new position.

In our example we have created a menu of thumbnails which allow you to jump to the specific sections without the need for chapter points, particularly helpful with long videos, recording of conferences, symposia and such like.

script to play from a specific from HTML5 video

Other Options

The Opus JavaScript action can be used to control aspects of audio and video elements on the page even if they are not part of the Opus content. In that instance you use standard JavaScript syntax

JavaScript to control an HTML5 video

This concludes the details of the tutorial. In the next section we summarise how to reuse the elements from the sample publication in your own projects.

next

creating interactive HTML5 video with Opus Pro - tutorial part 5