Hi,
We are an existing customer of an older version of Help Studio. We are thinking of upgrading, but one requirement we have is to embed HTML5 video (.mp4) in our web help. Of course we would want to use a responsive template so that it all works nice on iPads.
I can find some documentation and discussion on your site about your Flash movie widget, but what about HTML5 video? How can we use that with the latest version of Help Studio?
Thanks,
Jeff
We do have an item on our backlog here to include a HTML5 widget, but at present there isn't one included. HTML5 video is a bit of a moving target at the moment, with differing browser support and video formats, but I can help you get up and running with a basic Widget that will enable you to include videos in a way you should be able to adapt if/when things change.
1. Open Options from the Tools ribbon tab;
2. Select the Widgets page;
3. Click the new toolbar button to create a new Widget. Select "Content Widget" as the Widget type and give it a name of "Movie (HTML5)";
4. In the Widget designer that opens, tick "Use different Html for design time and output";
5. In the Content field, switch to XHTML view and paste this HTML:
<script type="text/javascript">
//<![CDATA[
document.write('<video id="sampleMovie" width="%%moviewidth:ishidden=true%%" height="%%movieheight:ishidden=true%%" preload="" controls="">');
document.write('<source src="%%movieurl:ishidden=true%%" type="video/mp4"><\/source><\/video>');
//]]>
</script>
6. In the Design Time Content field, switch to XHTML view and paste this HTML:
<div id="moviecontainer_%%guid1%%">
<div class="WidgetContainerBox" style="BACKGROUND-IMAGE: url(%%resourcepath%%/images/flash.gif)">
<h2 style="MARGIN-LEFT: 0px; MARGIN-TOP: 0px">HTML5 Movie Placeholder</h2>
<p>Your movie will appear in this box in Preview or when the help system is built</p>
<p><strong>Movie URL (internet URL or relative path to a file in the project):</strong><br />
%%movieurl:layout=inline,defaultvalue="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"%%</p>
<p><strong>Movie Width:</strong><br />
%%moviewidth:defaultvalue=640%%</p>
<p><strong>Movie Height:<br /></strong>%%movieheight:defaultvalue=360%%</p>
</div>
</div>
You can then include this widget in your topics and in preview and the generated output a HTML5 video tag will be output. The movie url you specify in the widget can be a relative path in your project (if you include the movie files as Other Files) or an absolute uri. If you are including different / additional video formats (which you may need to for wide device support) you would need to adapt the widget script to add additional <source> tags for the different formats.
I tried this and everything works except when I try to build the help file. The video is in the web help, but not in the .chm
This won't work in CHM - the IE components used by the Microsoft Html Help Viewer operate in a legacy mode that do not support any HTML5 features.
