BrowseLab Products Demos Support Company Download Pricing
Contents
:
Search:

Home > HelpConsole 6 > How to Insert HTML5 Video into a Help Page

How to Insert HTML5 Video into a Help Page

Web technology has shifted to accommodate HTML5 Video as a standardized way to embed video in web pages. Before HTML5 video, depending on the file's extension, you would need to have a plug-in (like flash) to play the video file in a browser. Now the <video> element can play videos in nearly every recent version of web browsers without a plug-in. HTML5 video elements only support .MP4, .OGG, and .WEBM files (not all browsers support .OGG or .WEBM yet, but nearly all support .MP4)

 

Learn more about HTML5 video at W3Schools.

 

HelpConsole 6 supports HTML5 video currently. However, the editor's engine does not recognize HTML5 video attributes UNLESS they are given values:

Example:

Regular HTML5 Video element:

<video width="320" height="240" controls>
     <source src="docs/movie.mp4" type="video/mp4">
     <source src="docs/movie.ogg" type="video/ogg">
     Your browser does not support the video tag.
</video>

 

HelpConsole HTML5 Video element:

<video width="320" height="240" controls="true">
     <source src="docs/movie.mp4" type="video/mp4">
     <source src="docs/movie.ogg" type="video/ogg">
     Your browser does not support the video tag.
</video>

 

Notice that in the second example, 'controls' is changed to 'controls="true"'. The value added to the attribute 'controls' doesn't matter, it just needs a value for the editor to recognize the attribute as valid.

 

As well, make sure to put your video files in the project's 'docs' folder (e.g. 'C:\Program Files\HelpConsole 6\Project Name\docs'). When the project is published, the video will be found if it is in this directory.

Step-by-Step Instructions:

  1. Open a HelpConsole help page for editing.

    Edit page button

  2. Switch to the '<>HTML' view in the editor.

    <>HTML view button

  3. Insert your HTML5 code on the page.

    HTML5 video code in the page editor's HTML5 view

  4. Make sure any attributes without values (e.g. 'controls') are given arbitrary values (e.g. 'controls="true"').
  5. Save the page and exit the editor to confirm the video is working.

Related Pages:

How to Embed a Video Using the Insert External Video Tool

How to Upload and Insert an .MP4 video (without .SWF file)

Page Editor
Videos

What Video Format to Choose?


Properties
Article ID:
how_to_insert_html5_video_into_a_help_page
Views: 628
Created By: admin
Modified By: admin
Created Date: 2/19/2016 2:11 PM
Last Modified: 2/24/2016 5:24 PM
Actions
Print This Article
Bookmark
Email This Article
Previous Article
Next Article

Was this page helpful?YesNo