Video is still quite problematic across different platforms. This is a general problem with digital video that is not specific to Help+Manual. Even though Help+Manual supports a wide range of different video formats only MP4 and online video services can be considered reliable. All other video formats should be avoided if you want to avoid trouble. If you follow the following basic rules your videos will play on the largest possible number of devices and platforms.

HelpXplain screencasts and infographics:

Animated HelpXplain screencasts and infographics can be inserted in WebHelp, CHM files and eWriter books. In other formats the static preview image for the presentation will be displayed. Note that HelpXplain presentations are only compatible with the CHM format when it is configured to use the Internet Explorer 9 or Edge HTML rendering mode. See Animated HelpXplain presentations for details.

MP4 Video Format:

When you use MP4 videos they should be created with the H.264 video codec and AAC audio. You can use MP3 audio in your videos, but AAC will be more universally compatible. If possible use a

CHM Files:

In CHM files use online video services (YouTube, Vimeo or Prezi) at all possible. All other formats will cause problems for your users, even if they seem to work for you. Also note that Microsoft's outdated CHM viewer does not handle MP4 correctly. Help+Manual manages online video services in CHM so that no online access is required until the user actually starts the video by clicking on the preview image.

WebHelp:

In WebHelp you should now only use either MP4 videos or online video services. Flash video is no longer supported because it has now been disabled worldwide and on all platforms.

EPUB for Apple iBooks:

Use MP4 in the M4V format with an Apple profile or online video services in ePUB eBooks targeting the Apple iBooks eBook reader on the iPad and iPhone. Video files are generally unsupported in ePUB on all other readers.

HelpXplain is an exciting new web graphics tool from EC Software, the same company that makes Help+Manual. HelpXplain presentations can run automatically, or they can be interactive tutorials, or even a combination of the two. They are easier to create and more flexible than with tools like PowerPoint, and they can be embedded in any web page just as easily as a YouTube video.

Check the path to HelpXplain

Check the General tab of the Program Options to make sure that the correct path to the full version of HelpXplain is registered. This makes sure that Help+Manual uses this to compile your HX projects instead of the integrated compiler used for the simple HX screencasts you can make with the screen capture utility. It also enables you to open HX projects directly from within Help+Manual, from the context menu displayed when you right-click on an Xplain in the HM editor.

HelpXplain can also insert static images

See Inserting Graphics and Screenshots to learn how to use HelpXplain to insert static images in Help+Manual.

Install HelpXplain and create a screencast or animated infographic

You must have HelpXplain installed on your computer to be able to select an .xplain project in Help+Manual. A free trial version is available. See Animated HelpXplain presentations for more information and a download link.

How to insert a HelpXplain presentation

This is basically just the same as inserting a regular video.

1.Click in the topic in the place where you want to insert the presentation.

2.Select Media > Insert HelpXplain Presentation in the Insert group in the Write tab.

3.Select your HelpXplain .xplain project with the Browse button in the File: field. The caption, title and preview image defined in the project will be loaded automatically.

4.Set the display options and then click on OK to insert.

Print Options

These options control how the Xplain is handled when you publish your project to PDF or Word.

For maximum reliability, online video on video sharing sites like YouTube and Vimeo are the best choice, because they solve all compatibility problems for you. You just upload your video to their site and they present it to every device and browser in a format that works.

Prezi is an online presentation tool, that creates cool presentations with rotation and zoom effects. Although Prezi has a strong focus on creating impressive "presentations", it is also a great tool for illustrating and explaining complex structures and procedures in technical documentation.

Tutorial project:

For more detailed examples see the Interactive Media tutorial project that you can find in the My HelpAndManual Projects\Examples folder in your Documents directory. It is also accessible in the Welcome screen at the top of the Project Explorer on the left.

Procedure

The basic procedure for all three online services is the same. However, you must choose the correct dialog for each service so that Help+Manual knows how to handle the media correctly. See the websites of the video providers for details on their services:

YouTube (mainstream online video)

Vimeo (more specialized online video, generally higher quality)

Prezi  (relatively new service for animated demos and presentations)

1.Click in the editor at the point where you want to insert the video.

2.Select the Media tool in Write > Insert Object and select the option for the media type you are inserting. The example below is for YouTube but the dialogs for the other video formats are essentially identical.

3.Click on the browse button to browse to the online service so that you can select the media you want to insert. You can then copy and paste or drag the URL of the media from your web browser into the URL: field in the dialog.
 
Alternatively, you can copy and paste the video URL or drag it from the Address: field of the browser into the URL: field in the Insert Video dialog.

4.After inserting the URL, Use Select Poster Image to play the video and select the placeholder graphic to be displayed in the topic. The user starts the video by clicking on this image. See below for issues with the Poster Image function in Vimeo videos.

Tip: Make sure that the preview window for playing the window is large enough before saving the poster image.

5.Set the video options.

6.Click on OK to insert the movie in your topic.

When you use the Poster Image tool in the video dialog with Vimeo videos, you may see a warning about Internet Explorer. This warning is displayed because of the internal Windows component used to play the video in a Window, which is still based on Internet Explorer.

Click away the warning

Vimeo is displaying this because it thinks you are using the Internet Explorer browser to access your site. This is not the case here and the warning can safely be ignored. You just need to click on the square in the upper right corner of the warning to be able to take the snapshot

Or take the snapshot in your browser

Alternatively, you can take the snapshot of the video in your browser. Then save it as a file and insert the file with the Load Image from File... option in the Poster Image tool.

The Custom Web Content option in the Media menu makes it possible to integrate a wide range of different media content in your topic pages. Help+Manual handles this by embedding the content in an iFrame on your page.

Tutorial project:

For more detailed examples see the Interactive Media tutorial project that you can find in the My HelpAndManual Projects\Examples folder in your Documents directory. It is also accessible in the Welcome screen at the top of the Project Explorer on the left.

How to insert custom web content in your topic pages:

Click in the topic where you want to insert the content and choose the Custom Web Content option from the Media tool in the Write tab.

Here too, you basically just need to enter an embed URL to the web page hosting the content. All the other settings are the same as for YouTube, Vimeo and Prezi:

Getting the embed URL:

This is the only thing that can be a little tricky. In some cases, like the Adobe Express example shown above, you will be able to use the direct URL provided by the service. Other sites may provide their own embed code with their own iFrame. You can identify this because it contains an <iframe> tag in the code, that will look something like this:

In this case you don't want to insert all the embed code. Instead, you need to get the URL from the src= attribute of the <iframe> tag, along with the dimensions (highlighted in yellow and aqua above).

If the http:// or https:// prefix is missing from the source as in the example, you need to add it. The URL you would need to use for the ThingLink example would then be:

https://www.thinglink.com/card/573536608976896002

These instructions are for inserting a video file stored on your computer. See further below for inserting videos hosted by online video sharing sites like YouTube.

1.Click in the editor at the point where you want to insert the video.

2.Select the Media tool in Write > Insert Object and select the Local Video option.

3.Click on the browse button in the Video File: field and select the video file. Alternatively you can also drag the video file into the Insert Video dialog.

4.Use Select Poster Image to select the placeholder graphic to be displayed in the topic. The user starts the video by clicking on this image.

5.Set the video options.

6.Click on OK to insert the movie in your topic.

Editing the embed code manually:

The Embed Code tab allows you to change the embedding code used for local videos if you want.

1.Click on the Embed Code tab and select the I want to enter the embedded HTML code manually option.

2.This displays the code that would normally be entered automatically.

3.Edit  the code or replace it with your own code and click on OK.

Note that you need to be familiar with writing HTML code manually to use this function. Any changes you make are entirely your own responsibility, Help+Manual will not parse or check your code in any way!

If you enter additional file or image references in your code the compiler will not know about the files you are referring to and will not automatically include them in your output. To solve this problem add these external files to the Baggage Section – then they will be included in your HTML output automatically.

If your video files are stored on a web server you can insert the URL of the video in the Local Video dialog instead of the name of the video file. For example, you can use this for video stored in a folder on your own website.

1.Follow the directions for inserting local video (see above).

2.Instead of using the browse button to select the video file, manually enter the URL of your video file in the Video File: field.

Important:
You must enter the complete URL and the complete file name. Include the http:// prefix and the extension of the file and make sure that upper and lower case are correct. Most web servers are case sensitive.

You can also embed videos from other video sharing sites but you must do this manually with an HTML code object, not with the Insert Video tool. This means that the video will display and play inline. You cannot use the Insert Video tool's lightbox option when you do this.

1.Visit the video site, select the video you want to embed and get the "embed code". This is usually available with a button labeled "embed". It will normally be enclosed in <iframe> or <div> tags.

2.Click in the editor where you want to insert the embedded video. Then select the Insert HTML Code Object tool in Write > Insert, paste the embed code into the editing box and click on OK.

That's it. This may not always work but you should find that it works fine for most common video sharing sites.

If you use screen video tools like Techsmith Camtasia or Adobe Captivate to create demos and tutorials there are some extra points you need to consider when inserting the movies they generate. Depending on the output format you choose, these tools sometimes output a whole "package" of files that also include a player. If you want to use the entire package you need to embed the videos manually instead of using the Insert Video tool.

Option 1: Export as a single MP4 file only:

Option 2: Link to the video package with the Custom Web Content option:

Option 2: Embed the "video package" manually

Videos in ePUB eBooks will only play in the Apple iBooks® player on Apple iOS devices (iPad, iPhone and iPod Touch). They may play on some other devices but you shouldn't depend on it.

If you want to insert videos in your iBooks®/ePUB eBooks you must use the M4V format and it must be encoded correctly with an Apple-compatible profile. If you don't use Apple QuickTime directly you can use the excellent free Handbrake tool, which delivers very high quality and comes with all the Apple profiles you need. It has a huge number of settings but you can ignore them. You just need to select the profile for the target device (iPad or iPhone/iPod Touch) and convert the video.

Handbrake website and download: http://handbrake.fr