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
The
The
1 | <video controls poster="linktoposter.jpg" width="640" height="360" controls="controls"> |
2 | <source src="linktovideo.mp4" type="video/mp4" /> |
3 | <source src="linktovideo.webm" type="video/webm" /> |
4 | <source src="linktovideo.ogv" type="video/ogg" /> |
Note how you reference several versions of a video. This is because not all browsers support MP4 playback. Those that do not will skip to the WEBM format. If the browser doesn’t support MP4 or WEBM, it will default to the OGV format. Between these three formats, you should have compatibility with just about every common browser.
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
Keep the following fixes in mind if you’re having trouble implementing
- 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 Video
The 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 Compatibility
In 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:
- MediaElement.js – A toolkit that gives you the option to include just one single .MP4 file, as well as the freedom to use “multiple codecs with Flash fallback.” There are plugins for Drupal and WordPress (among others) which make this a great option. Keep in mind that this option is javascript-dependent, and you’ll be given a lot of options (a good thing) with what you can do to the player. Click here to check out MediaElement.js.
- Video for Everyone – This is a no-javascript solution that provides a very simple way to ensure compatibility with older browsers. There is nothing to download or install; the only call you will need to make is to a Flash container. There are a few of these: FlashFox, Flow Player, and JW Player. Click here to check out Video for Everyone.
Code Sample: Of the two methods, the Video for Everyone requires the least setup, so here’s the code:
1 | <video controls="controls" poster="linktoposter.jpg" width="640" height="360"> |
2 | <source src="linktomovie.mp4" type="video/mp4" /> |
3 | <source src="linktomovie.webm" type="video/webm" /> |
4 | <source src="linktomovie.ogv" type="video/ogg" /> |
8 | <param name="allowFullScreen" value="true" /> |
9 | <param name="wmode" value="transparent" /> |
10 | <param name="flashVars" value="config={'playlist':[ 'linktoposter.jpg',{'url':'linktomovie.mp4','autoPlay':false}]}" /> |
11 | <img alt="My Movie" src="linktoposter.jpg" width="640" height="360" title="No video playback capabilities, please download the video below." /> |
14 | Your browser does not appear to support a browser. Please download the video below. |
17 | <strong>Download video:</strong> <a href="linktomovie.mp4">MP4 format</a> | <a href=" linktomovie.ogv">Ogg format</a> | <a href=" linktomovie.webm">WebM format</a> |
The beauty of Video for Everyone is that it only requires a single .MP4 file to work. But, it’s still a good idea to have the WEBM and OGV formats, as they are supported by many browsers.
Browser Compatibility
If you are wondering which modern browsers support which formats, here’s a simple breakdown.
| Browser | MP4 | OGV | WEBM |
| IE9 | Yes | Manual Install | Manuall Install |
| Firefox (10) | No | Yes | Yes |
| Chrome (17) | No | Yes | Yes |
| Android | Yes | Yes | Yes |
| 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.
23:19
No comments
Post a Comment