HTML5 Tutorial:
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.
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.
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.
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.
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.
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
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.
creating interactive HTML5 video with Opus Pro - tutorial part 5