JW Player for Flash V5

Using the HTML5 Video Tag

Purpose

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).

Contents

HTML5 Today

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:

BrowserMarket ShareHTML5 SupportFlash Support
Internet Explorer 6/7/831%NoYes
Firefox25%Yes (WebM)Yes
Chrome21%Yes (MP4 + WebM)Yes
Internet Explorer 98%Yes (MP4)Yes
iOS4%Yes (MP4)No
Safari3%Yes (MP4)Yes
Android2%Yes (MP4)Maybe
Opera2%Yes (WebM)Yes
BlackBerry1%NoNo

The Video Tag

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:

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>

For a complete reference of the HTML5 Video tag (including its JavaScript API), visit the W3C HTML5 video element draft.

Multiple Sources

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 JW Player for HTML5 Playback

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.

The JW Player helps to fix all these issues. It sniffs out the contents of the video tag - the sources, as well as the poster, loop, autoplay, etc.). It also detects the browser capabilities and then uses JavaScript to, for example, work around bugs, add new features or embed a Flash version of the player in place of the <video> tag.

Example

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.

<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

<video height="270" width="480" id="myVideo">
  <source src="/static/bunny.mp4" type="video/mp4">
  <source src="/static/bunny.webm" type="video/webm">
</video>

<script type="text/javascript">
  jwplayer("myVideo").setup({
    modes: [
        { type: 'html5' },
        { type: 'flash', src: '/jwplayer/player.swf' }
    ]
  });
</script>

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.

Many more options (also for e.g. a JavaScript API) are available. Please see our Embedder reference for a full overview.