<object width="320" height="240">
<param name="movie" value="myvideo.swf" />
<embed src="myvideo.swf" width="320" height="240"></embed>
</object>
<audio> and <video> tags allow you to play media files in an HTML5-aware browser without a plug-in. The elements also become part of the DOM so you can create your own player controls, add captions and synchronize JavaScript events with media playback. As a bonus, the basic HTML5 code is far easier to understand:
<video src="myvideo.mp4" width="320" height="240" />
<audio> and <video>
tags, it does not specify a particular codec and vendors have their own choices. For IE and Safari, you can’t go wrong with H.264-encoded MP4 files. Firefox, Chrome and Opera support Theora or Vorbis in an Ogg container and WebM will be available soon.
Therefore, you’ll still need to encode multiple files for a single video. Fortunately, there’s no need to resort to scripting or browser detection because HTML5 permits us to define any number of source files — the browser will choose the first compatible format it finds, e.g.
<video width="320" height="240">
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.ogv" type="video/ogg" />
<source src="myvideo.webm" type="video/webm" />
</video>
<video> tag, we can fall back to a Flash or Silverlight version:
<video width="320" height="240">
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.ogv" type="video/ogg" />
<source src="myvideo.webm" type="video/webm" />
<object width="320" height="240">
<param name="movie" value="myvideo.swf" />
<embed src="myvideo.swf" width="320" height="240"></embed>
</object>
</video>
<video width="320" height="240">
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.ogv" type="video/ogg" />
<source src="myvideo.webm" type="video/webm" />
<p>Sorry, your browser cannot play this video.</p>
<img src="videofail.png" />
</video>
Frequently Asked Questions on HTML5 Video Cross-Browser Fall-Backs
What is HTML5 video cross-browser fall-back and why is it important?
HTML5 video cross-browser fall-back is a technique used to ensure that videos can be played across different browsers, even if they do not support HTML5 video. This is achieved by providing alternative video formats or players, such as Flash, for browsers that do not support HTML5 video. This is important because it ensures that your video content can be accessed by all users, regardless of the browser they are using. It also improves the user experience by providing a seamless viewing experience.
How can I implement HTML5 video cross-browser fall-back on my website?
Implementing HTML5 video cross-browser fall-back involves providing alternative video formats or players for browsers that do not support HTML5 video. This can be done using the
What are the different video formats supported by HTML5?
HTML5 supports three video formats: MP4, WebM, and Ogg. MP4 is supported by all major browsers, while WebM and Ogg are supported by some browsers. It’s important to provide all three formats to ensure maximum compatibility.
Why is Flash used as a fall-back for HTML5 video?
Flash is used as a fall-back for HTML5 video because it is supported by most browsers and can play many different video formats. However, it’s worth noting that Flash is becoming less popular due to security concerns and the rise of HTML5, so it’s important to also provide HTML5 video formats.
How can I test if my HTML5 video cross-browser fall-back is working correctly?
You can test your HTML5 video cross-browser fall-back by viewing your website in different browsers and checking if the video plays correctly. You can also use online tools to simulate different browsers and devices.
What are the limitations of HTML5 video cross-browser fall-back?
One limitation of HTML5 video cross-browser fall-back is that it relies on the user’s browser supporting either HTML5 video or Flash. If the user’s browser does not support either, the video will not play. Additionally, providing multiple video formats and a Flash player can increase the size of your website, which may affect loading times.
Can I use JavaScript to implement HTML5 video cross-browser fall-back?
Yes, you can use JavaScript to implement HTML5 video cross-browser fall-back. This can be done by detecting the user’s browser and dynamically loading the appropriate video format or player.
Are there any tools or libraries that can help with implementing HTML5 video cross-browser fall-back?
Yes, there are several tools and libraries that can help with implementing HTML5 video cross-browser fall-back. These include Video.js, MediaElement.js, and jPlayer.
How can I ensure that my videos are accessible to users with disabilities?
You can make your videos accessible by providing captions and transcripts, and by ensuring that your video player is keyboard-accessible. You should also ensure that your videos do not auto-play, as this can be disruptive to users with cognitive disabilities.
What is the future of HTML5 video and cross-browser compatibility?
The future of HTML5 video is promising, with more browsers supporting HTML5 video and the decline of Flash. However, cross-browser compatibility will continue to be an important consideration, as different browsers may support different video formats. As such, it’s important to stay up-to-date with the latest developments in HTML5 video and browser support.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
