I spent the better part of the last few days migrating some multimedia learning aids from Flash to HTML5 video. Flash was suitable a few years ago when HTML5 was not widely supported by mainstream modern browsers but it now seems unnecessary for simple video playback.

Preparing for conversion

Since I had never actually used HTML 5 video before i had to do a little research. This led me to W3Schools. There I learned about the 3 supported formats of web video: MP4, Ogg & WebM. Each format’s support varies based on browser type. Since the source files that I had used to create the multimedia learning aids were not in any of these formats I had to do some conversion. To ensure cross browser compatibility I also realized that I would have to use more than one format so I chose MP4 and Ogg.

Converting Videos

To convert the original videos I needed a transcoder capable of saving in MP4 and Ogg. This led me to Handbrake which I had used before to create MP4 files. Handbrake, however, did not transcode to Ogg so I continued to search until I found Miro Video Converter (be sure to opt out of installing additional toolbars during installation if you only want the video converter). Using these 2 tools I was able to convert all my video files to both MP4 and Ogg files.

Editing the code

Editing the HTML code using the <video> tag was very straight forward and produced much less code than the previous Flash embedded approach. I included both the MP4 and Ogg files as the source files for the video and  included a courtesy message for browsers that do not support HTML 5 video. Since the multimedia learning aids are being used in an environment where the hardware and software is standardized and all browsers support HTML 5 I did not include a fallback to the Flash versions of the videos. I tested the videos using Safari and Firefox on Mac and they played properly in both browsers.

Conclusion

HTML 5 code is simpler to understand and creates smaller webpages than those used to embed Flash into websites. Videos have to be converted to a suitable format or multiple suitable formats for maximum compatibility across browsers. This leads to more video files that take up more storage space on the server but also results in a standards compliant website that does not need plugins to display content.