Featured nathvibe brand

Migrating from Flash to HTML5 video

HTML5 Multimedia PerformanceI 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

Miro Video Converter screenshotTo 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.

Leave a Comment

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