FAQ

HTML5 Questions

Questions relating to the HTML5 export function and problems with the results.

HTML5 Publication Just Displays a Blank (Black) Screen

The most likely reason for this is that the opus.js file is missing from the same location as the HTM file, or an old version is being used. Upload the current opus.js file from the publish directory.

The blank screen may also happen if something in your publication is not valid HTML so the browser cannot interpret the instructions and nothing displays. (The colour will match the background colour of your publication set via Publication Properties in Opus, for which the default is black.)

Solution

Check you have uploaded the most recent opus.js file. Opus copies this file to the same directory as your published HTML5 file and you should manually upload it from there.

Your HTML5 publication may not work at all if it includes:

1. an action which no longer has an object attached - for example, you deleted an object which had a Show action attached but didn't delete the action.
2. an object name which includes a non-alphanumeric character such as a colon or angled brackets e.g: "Page:1"
3. an object name has the same name as an action e.g: "Print" or "Exit"
4. a script or javascript action with an error in it
5. an HTML object which contains invalid HTML
6. you have put invalid HTML into the header section of the Publish Settings

So check your publication for any of these. Also consider the process for Solving Problems with Publications and follow those procedures to identify the problem object. Remember that some features will not work in HTML5 when used in specific combinations such as an object with a blend on may not work with a fade transition, and Goto Random page does not work when launched from a timeline.

If none of these help, please contact support preferably with a copy of a single page Opus file which shows the problem.

Contacting Support

My Responsive Content Doesn't Resize

You have set the Chapter Properties to allow the page to be resized and published your HTML5 as a single DIV but when you include the Opus output in another web page it doesn't resize when that web page resizes.

Solution

Check to make sure you have...

1. published to a single DIV not a single page publication
2. removed the temporary header and footer from single DIV output
3. not set the minimum page size in Chapter Properties too high, or set the maximum page size too low

How Can I Preview my HTML5 Video in the Opus Editor

HTML5 uses a particular format of video (MP4) which versions of Windows before v8 cannot preview. Which measn you can't see the video in the Opus editor or even when using the Preview, you need to publish the file to HTML5 before you can preview it. Some programs include their own MP4 players for Windows v7 and some make these available for other Windows programs including Opus (we use Corel VideoStudio for example) in which case you will be able to preview.

Solution

Take a screenshot of a key frame in your video and add it as the Image property of the video.

So How Can I Position Interactive Elements on My HTML5 Video

Even if you can preview your MP4 video in the Opus Editor (see above) Opus does not decode and import your video so cannot display a particular frame.

Solution

Take a screenshot of a key frame in your video (we use Paint Shop Pro) and use it as the background image for your video object.

Alternatively add it to your publication as a separate Image object. Use the Make Same Size and Align Centre functions on the Arrange menu to make it the same size and position as your video object. Set it to be Initially Hidden and it will be visible in your editor but not the final publication - then delete it when you no longer need it.

You can then use this preview image to draw your hotspots or other objects in the correct position in the usual way. Repeat the process for each frame you need to add content for.

My Interactive Elements Don't Show in Full Screen Mode

If you switch your video to full screen using the in-built HTML5 video controls it overlays the video on top of everything else so covers the interactive elements drawn in Opus.

Solution

You will need to control the video and "full screen" mode yourself. Turn off the video controls via video properties and make your own video controller or use the component provided with Opus Pro. The you will need a small piece of javascript to get the size of the browser window and set the DIV containing your video object to match that size.

We hope to be providing a component for this via our Opus Xtras page or you can get us to write one specifically for you via our QuickStart service.