One of the most celebrated elements of the new HTML5 specification is the ability to natively handle video playback. A simple
But, wait! Why would you even bother with using
Let’s take a closer look at the
- poster - a link to an image that will be displayed while the video is loading or prior to the visitor clicking on the play button
- controls — tells whether or not the visitor can see the video playback controls
- source — the link to the video file’s location
- source type - the video format of the referenced file
- fallback text — the text within the tags will display if the browser cannot play any of the three video formats
- The MP4 version of the video must be listed first because of a bug in the iPad.
- If the video will not play back on a common, up-to-date browser, you may need to add the proper MIME types into your .htaccess file:
- Add Type video/ogg — ogv
- Add Type video/mp4 — mp4, m4v
- Add Type video/webm — webm
Converting VideoThe prospect of converting your video to different file types may sound tedious, but it’s easily done. A free resource for converting video files into multiple formats is Miro Video Converter, which lets you transform your video files into different formats while retaining the original dimensions. Other tools are available, but for a standalone, simple process, Miro Video Converter is the way to go.
Backwards CompatibilityIn order to ensure that older browsers can view your videos, you should rely on an Adobe Flash fallback. Because this compatibility issue with older browsers is a common problem, there are several libraries and scripts online that can do a lot of the heavy lifting for you. We’ll look at two of them:
Of the two methods, the Video for Everyone requires the least setup, so here’s the code:
Browser CompatibilityIf you are wondering which modern browsers support which formats, here’s a simple breakdown.
|IE9||Yes||Manual Install||Manuall Install|
|Safari (5.1.3)||Yes||Manual Install||Manual Install|
|Opera (11.61)||Manual Install||Yes||Yes|
In Sum…So, if you have all three file formats — MP4, WEBM, and OGV — you should have most of your bases covered, with the exception of very old browsers and obscure browsers. That’s where the Flash fallback comes into play. Using one of several Flash fallback techniques along with HTML5 is a solid combination of cutting-edge techniques and accommodations for older browsers.
Implementing Cross-Browser Video Playback in HTML5 Reviewed by Aamir Pathan on 12:49 PM Rating: