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.
No comments: