Playing a Video in the HTML 5 Era

I was setting up a Tracker.Net demonstration today and the customer sent me a .wmv file to be used as one of the lessons. Although a video like this would normally be added to a lesson created by an authoring tool, Tracker.Net also allows any file or HTML link to be an asset, meaning that the user can launch it. It is then automatically marked as complete since there is no SCORM communication.

While it is possible to launch a .wmv file directly, I prefer not to do that since then you are relying on the user’s association with that extension. The result can be Windows Media Player or any of a myriad of players. These can take quite a while to spin up and can make your training seem unresponsive. Instead, I like to embed the video in a simple HTML page. In the past, I would have just pasted in the tags for a Windows Media Player, but with the advent of HTML 5, it is better to play the video natively in the browser. This is faster and a better cross-platform approach, particularly with mobile devices. And older browsers will default to the Windows Media Player anyway. Here’s how to do.

  1. Convert the .wmv files to the other video formats: mp4 (Internet Explorer and Safari), ogg/ogv (Firefox and Opera), webm (Firefox, Chrome, and Opera). You can see a list of what browsers support what formats at http://en.wikipedia.org/wiki/HTML5_video. There are numerous programs and sites for doing the conversion. I’ve found the Freemake Video Converter and Freemake Audio Converter (to do the same thing with audio files) work well.
  2. Create your HTML page with the HTML5 video tags first but with the Windows Media Player ActiveX control tags (Internet Explorer) and embed tags (Firefox and other browsers) as shown.
<!doctype html> 
     <html>  
          <head>   
               <title>Measuring Voltage</title>  
          </head>  
          <body>   
               <form>    
                    <video controls="controls" autoplay="autoplay">     
                         <source src="Measuring_Voltage.webm" type='video/webm; codecs="vp8.0, vorbis"'/>     
                         <source src="Measuring_Voltage.ogv" type='video/ogg; codecs="theora, vorbis"'/>     
                         <source src="Measuring_Voltage.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>     
                         WordPress won't display the windows media tags correctly. Click here to see a graphic of the tags.
                    </video>   
               </form>  
          </body> 
</html>

Newer browsers will play the video format that they can support. Older browsers will revert to the Windows Media Player.

I hope this is helpful.

About Jeff Rhodes
Jeff Rhodes is the Branch Chief, Program Office Support at the U.S. Office of Personnel Management (OPM). Prior to that, he was the Academic Chief Technical Officer at the United States Air Force Academy and previously a Senior IT Specialist in charge of SharePoint and other key systems at the Academy. Jeff was the founder and Chief Technical Officer of Platte Canyon Multimedia Software Corporation, a leader in developing commercial e-learning software. He graduated at the top of his class at the Air Force Academy, where he earned a Bachelor of Science in Electrical Engineering. Jeff received a Master’s degree in Economics from the London School of Economics, which he attended under a British Marshall Scholarship. He is the author of Creating Business Applications with Office 365: Techniques in SharePoint, PowerApps, Power BI, and More, Programming for e-Learning Developers: ToolBook, Flash, JavaScript, and Silverlight, VBTrain.Net: Creating Computer and Web Based Training with Visual Basic .NET and The ToolBook Companion. He lives in Colorado Springs with his wife Sue and is the proud father of his sons Derek and Michael.

One Response to Playing a Video in the HTML 5 Era

  1. Dave Smith says:

    Jeff,

    We have had luck embedding the fallback behavior directly nested inside the video tag…

    In this example the “fallback” insert was a Flash presentation, but we also support wmv, mov, and the other legacy video formats with the appropriate clsid value for the browser plug-in associated with that media format. (Note: This is an abbreviated example. We usually also nest the deprecated tag inside the tag for completeness.)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: