Tuesday, March 20, 2018

embed a video into a help page

Sometime you want to create some user guide to introduce your application or show your customers how to use your application: normally you can write a world/pdf document and link it to your help page but most time it will be more helpful if you can just use some kind of screen recording tool to record a live video and then show it to your customers.

Here is what I did for one of my app:

1. use Snagit(or any other screen recording tool) to record what I want to show to my customers and save it as a MP4 video file
2. upload the video file to workspace
3. create a blank page then create a region, put following into the region:

<video id="video" width="700" height="550" controls>
  <source src="#WORKSPACE_IMAGES#xxx.mp4" type="video/mp4">
  Your browser does not support the video tag.

</video>
<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>

replace xxx.mp4 with your video file.

Now link this page to your application as help page.

Note: this will not work for some old version IE/Browser where HTML5 is not supported but these days, most customer will have a browser that support HTML5.