HTML 5 video

The newest generation of internet browsers all support native HTML 5 video playback without the need for third-party plugins like Adobe Flash.



That in itself is great progress, but there are some minor caveats due to differences in the video codec support. There are three video formats used in the different html 5 <video> tag implementations by the browser vendors:

Browser Video format
Ogg TheoraH.264WebM / VP8
FirefoxSupportedSupportedSupported
ChromeSupportedMay be removedSupported
OperaSupportedSupported since v24Supported
IE 7/8no <video> supportno <video> supportno <video> support
IE 9+Not supportedSupportedIf user installs codec
SafariNot supportedSupportedNot supported

To deliver cross-platform html 5 video with the highest level of compatibility, encode your media in both H.264 and at least one alternative format.

The following HTML syntax can be used to embed video in a page:

<video poster="gizmo.jpg" controls="controls">
  <source src="gizmo.mp4" type="video/mp4" />
  <source src="gizmo.webm" type="video/webm" />
  <source src="gizmo.ogv" type="video/ogg" />
  Video not playing? <a href="gizmo.mp4">Download file</a> instead.
</video>

Firefox, Chrome, IE9+, Safari and Opera will use the .mp4 file. Browsers without H.264 support skip to the .webm or .ogv file and play that instead. If loaded in a browser which does not support the <video> tag, a download link for the media file is displayed instead.

Update March 2012: More than a year after Google announced they would remove H.264 support from Chrome, it still remains in the browser. Some speculate that H.264 will effectively remain in Chrome for the foreseeable future.

Update 2014: Opera, the last H.264 holdout, implemented built-in support of the H.264 codec in version 24 on their browser, making H.264 the single common denominator for all current browsers across vendors.

Update February 2015: After a site migration to another server, my hosting provider blocks direct http request to any mp4/ogv/webm media files stored on the server. This affected the example files, so I had to instead stream them through a script, meaning the examples had to be updated and video tests on external sites with deep links to the media files in this server have stopped working. I apologize for the inconvenience.

The above example works on desktop/laptop browser platforms. Handheld platforms handles inline video a little differently. iOS and newer versions of Android (4.0+) works pretty much as expected. The browser in older older versions of Android may need some extra help to launch the video:

<video poster="gizmo.jpg" id="video" style="cursor: pointer;" >
  <source src="gizmo.mp4" />
  <source src="gizmo.webm" type="video/webm" />
  <source src="gizmo.ogv" type="video/ogg" />
  Video not playing? <a href="gizmo.mp4">Download file</a> instead.
</video>

<script type="text/javascript">
  var video = document.getElementById('video');
  video.addEventListener('click',function(){
    video.play();
  },false);
</script>

The example video on this page was encoded into .mp4, .webm and .ogv from a 720p .mov source video file using these commands:

Encoding H.264 mp4 with Handbrake:

HandBrakeCLI.exe -i Source.mov -t 1 -c 1 -o Destination.mp4 -f mp4 -X 558 -l 320 -e x264 -q 20 -a 1,1 -E faac,ac3 -6 dpl2,auto -R 48,Auto -B 160,auto -D 0.0,0.0 -x cabac=0:ref=2:me=umh:bframes=0:8x8dct=0:trellis=0:subq=6:weightb=0 -v 1

Encoding webm with FFmpeg (version 0.6 or newer):

ffmpeg.exe -i Source.mov -s 558X314 -aspect 16:9 -vb 500000 Destination.webm

Encoding ogv with ffmpeg2theora:

ffmpeg2theora-0.27.exe -o Destination.ogv -x 558 --aspect 16:9 -v 9 Source.mov

The output example video files are available for download:
Note that the web server hosting the media files must be configured to reply with the correct MIME content types when the files are requested by the browser:

Extension: .mp4
Type: video/mp4

Extension: .webm
Type: video/webm

Extension: .ogv
Type: video/ogg

To also get video playback in Internet Explorer 7/8, you will have to resort to user agent detection and the Media Player ActiveX object and use something like this:

<object>
  <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/windows/windowsmedia/default.aspx"
    width="558" height="364" src="gizmo.mp4"
    showcontrols="True" showstatusbar="False"
    showdisplay="False" autorewind="True"
    AutoStart="True">
  </embed>
</object>

Note that the above ActiveX example uses the H.264 encoded .mp4 file, which will only work out-of-the-box on Windows 7 and later versions. To support older versions of Windows with IE, you must encode the video file in the .wmv format, for example using Microsoft Expression Encoder 4
Tags: html
Page last updated 2015-02-15 13:54. Some rights reserved (CC by 3.0)