Playing a Video in the HTML 5 Era
May 10, 2012 1 Comment
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.
- 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.
- 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.