Using the HTML5 Video Tag
This guide explains how to use the HTML5 <video> and <source> tag, and how to use JW Player for progressive enhancement (work around bugs and limitations).
The JW Player is designed to gracefully enhance videos embedded with the HTML5 <video> tag. This means you can already use the HTML5 Video tag today, despite the fact not all browsers support it yet. The JW Player will automatically detect and work around the quirks and limitations of each browser.
It also means you only have to encode your video in one format (MP4 with H.264/AAC), since JW Player will leverage the Flash plugin for playback in HTML5 browsers that do not support MP4. Two formats (MP4 + WebM) are an option too, of course. In that case you simply get enhanced HTML5 playback.
Before jumping into the details of the video tag, here's a rough browser market share overview, including support for HTML5 and Flash. Data is pulled from StatCounter.com, August 2011. The numbers add up to 97%, with the remaining 3% mostly being mobile browsers in feature phones that have limited capabilities:
|Browser||Market Share||HTML5 Support||Flash Support|
|Internet Explorer 6/7/8||31%||No||Yes|
|Chrome||21%||Yes (MP4 + WebM)||Yes|
|Internet Explorer 9||8%||Yes (MP4)||Yes|
Here is a basic example of a video embedded with the HTML5 video tag:
<video height="270" src="/static/bunny.mp4" width="480"> </video>
This example will display the video "bunny.mp4" in a viewport of 480 by 270 pixels, without any added features. Additional attributes can be set to customize the <video> tag. Here's the full list:
- autoplay () : include this attribute (no value) to let the video start as the page gets loaded. Use sparsely, since this may frustrate your viewers. Note that it does not work on iOS.
- controls () : include this attribute (no value) to display a simple controlbar, provided by the browser. The design of this controlbar varies per browser (which is a common issue JW Player resolves gracefully).
- height (number) : height of the video on the page in pixels - is required.
- loop (): Include this attribute to let the browser continuously repeat playback of the video.
- poster (string): the url of a poster frame that is shown before the video starts. Can be any PNG, JPG or GIF image. By default, it is not set (i.e. no preview).
- preload ('auto', 'metadata', 'none') : This attribute defines whether the entire video is loaded upon webpage load, or whether only the metadata is initially loaded. Or, you can choose to not load the video at all upon webpage load. The default (on most browsers) is metadata.
- src (string) : The URL of the video to play. This is not required, since source files can also be listed using <source> tags (see next section). See the supported video and audio formats guide for more info on which browser supports which filetype.
- width (number) : width of the video on the page, in pixels. Is required.
Here is another example of an HTML5 video tag, this time using more attributes. It will display the video with a poster frame and playback controls. The video is not loaded on page load, but only after the user clicks it:
<video controls height="270" preload="none" poster="/static/bunny.jpg" src="/static/bunny.mp4" width="480"> </video>
In the two examples above, the <video> cannot be played in HTML5 browsers that do not support the MP4 format (i.e. Firefox, Opera). You can use JW Player to detect these browsers and fallback to Flash (see next section), but you can also use an MP4 video plus a WebM video for increased HTML5 support. This is setup using multiple <source> tags:
<video height="270" width="480" controls> <source src="/static/bunny.mp4" type="video/mp4"> <source src="/static/bunny.webm" type="video/webm"> </video>
The <source> tag basically replaces the single src attribute. Every HTML5 browser will scan through these tags top to bottom, until it finds a video it can play. With a combination of an MP4 and a WebM video, you have nearly all HTML5 browsers covered (Firefox 3.x only supported the outdated OGG format, but that browser is almost gone now).
The type attribute is not required, but useful for increased performance. If it is not set, all browsers will start downloading the first video to find out if it can play. With the type set, Firefox and Opera recognize they should download the second video instead of the first one.
Note that some HTML5 tutorials will tell you to include a codecs=xxx section in your type attribute. We advise against this, since it is hard to do correct (MP4 codecs have super technical names) and HTML5 browsers today ignore this information.
Using the <video> and <source> tags, you can embed video on your page that plays reasonably well in all HTML5 browsers. Unfortunately, the video won't play in those who don't support HTML5 (read: Internet Explorer 6/7/8). And if you only use MP4, the videos won't play in WebM browsers (Firefox, Opera).
In addition to this, today's HTML5 browsers still have to implement core video features like Fullscreen playback and display of captions/subtitles (through the upcoming <track> element). Plus there's the inevitable browser bugs (especially on devices) and different looking controls that cannot be styled.
Here's how to setup JW Player for our example <video> tag. Note the ID that is given to the video tag, it is used to direct JW Player to it.
In this example, the player uses HTML5 whenever available. Change the order of the html5 and flash options in the modes block if you want Flash first.