HTML5 Tutorial:
This tutorial shows you how you can overlay HTML5 video with any of the objects available in Opus to create enhanced and interactive video without editing the video itself or relying on the features of your video editing package.
You can add buttons, menus, or interactive hotspots to make certain areas of the video active. You can add text, still images or pointers to highlight items. You can even overlay quizzes and tests.
The tutorial also introduces the use of a JavaScript function to track the position of the video and show and hide elements at specific times. It also uses a JavaScript action to pause the video while questions are answered. The JavaScript action is only available in Opus Pro but the core of the tutorial can be used with Creator.
HTML5 uses MP4 format video. Android requires a different and more restricted subset of MP4 with specific compression settings which are detailed here. MP4 will not preview in Opus unless you have an MP4 player installed but in any case we strongly recommend you Publish HTML5 publications, especially video publications, and preview them in a browser.
This tutorial uses a sample publication which is provided with Opus Pro (v9.55 or greater) or can be downloaded from the side menu.
The tutorial also describes a JavaScript function to display and monitor the current playback position of the video and to reset it at will, together with a JavaScript action to pause the video while a quiz is displayed.
The sample publication uses a video from the NASA library and is available from here.
In the next section we look at placing objects over the video.
how to create interactive HTML5 video with Opus Pro - tutorial part 1