HTML5 Tutorial:

Interactive HTML5 Video

Part 6: Using the Example in Your Own Publications

This section provides a step-by-step guide to reusing the elements of our HTML5 video example in your own publication. It requires Opus Pro. It does not require an understanding of the functionality explained in detail in the previous sections of the tutorial.

Add the Video

1: Create or Open an HTML5 publication and add a video object to your page as you would with any other publication.

2: Use Browse to locate the video you want to use.

Remember that it must be MP4 format and that this will not preview in Opus (unless you have a Windows MP4 codec installed not simply Windows Media Player - these are often provided with video editing software). In any case we always recommend you preview the video in a published file not in preview.

3: Make sure the names for the Page and the Video Object do not contain any spaces, hyphens or punctuation (use underscores instead).

4: To prevent the user skipping through the video go to the Video tab on the Properties dialog and turn off the checkbox marked Controls so that it is unchecked and the default HTML5 video controls will be disabled.

Getting Video Time

5: Go to the Variables tab of the Publication Properties and click Add to create a new variable and name it currTime and click Number to set is as a number with the initial value of 0.

6: Add an Ticker trigger to the page with the video on and set the interval to a tenth of a second.

7: From the Programming tab add a JavaScript action to your ticker trigger and type in the following script.

_DWPub.currTime=_DWPub.PageName.VideoObjectName.videoElement()

Replace PageName with the title of the page you are using for your video as displayed in the Opus Organiser, and likewise replace VideoObjectName with the name of the video object on your page.

Adding Other Content

8: Add, resize and position any other content you want to use over the video as you would any other Opus object (see creating content). Simply make sure anything you want to appear above the video is higher in the Opus Organiser Tree.

9: Set the objects to be Intially Hidden if you want them to appear at specific points in the video rather than be dispalted from the beginning.

Displaying Content at Specific Points

Using Opus Actions

10a.1: Select theTicker trigger we created earlier and select If from the Programming tab to add a conditional action to the trigger.

10a.2: Click the Name of Variable to compare drop down and select the currTime variable from the drop down.

10a.3: Then click the Comparison drop down and select Greater Than or Equal to as the condition to check.

10a.4: Click the Number option from the Compare With section and type in the time you want the action to start.

Using Script

Using script can make things more versatile and you may find the syntax and example for most basic functions (as detailed in the script help file) easy to follow without programming knowledge.

10b.1: Select theTicker trigger we created earlier and select Script from the Programming tab to add a script action to the trigger and type in the following script.

10b.2: Change the first number (41) to match the time (in seconds) when you want the activity to start and change the second number (48) to match the time when you want it to end.

10b.3: Type in the script for the action you want to take place at that point. Making sure all the script is between the curly brackets. It also good practice to end each command with a semi-colon.

Publish and Test

Once you have added each activity you can then publish you're project and test that it works as expected. For repeat tests in any single editing session try the Quick Publish and Test shortcut on the Publication menu.

creating interactive HTML5 video with Opus Pro