Logo

HTML 5 video

The newest generation of mainstream 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 unfortunately, there are some 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
OperaSupportedNot supportedSupported
IE 7/8no <video> supportno <video> supportno <video> support
IE 9+Not supportedSupportedIf user installs codec
SafariNot supportedSupportedNot supported

The current recommendation (ignoring IE 7/8 for a moment) for delivering cross-platform compatible html 5 video is to encode your media in both H.264 and at least one alternative format.

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.

To embed video in a page, the following HTML syntax can be used:

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

Firefox, Chrome, IE9+ and Safari will use the .mp4 file, Opera will currently 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.

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="pics/video/gizmo.jpg" id="video" style="cursor: pointer;" >
  <source src="pics/video/gizmo.mp4" />
  <source src="pics/video/gizmo.webm" type="video/webm" />
  <source src="pics/video/gizmo.ogv" type="video/ogg" />
  Video not playing? <a href="pics/video/gizmo.mp4">Download file</a> instead.
</video>

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

Giving the following result:


(Also note that providing a "poster" image like in the above example helps the mobile browser to correctly size the video player element in the page).

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. To support older versions of Windows, you must encode the video file in the .wmv format, for example using Microsoft Expression Encoder 4
Tags: html
Page last updated 2013-09-26 19:04. Some rights reserved (CC by 3.0)
Tag cloud
modding asp japan photography html aspnet dotnet databases utilities javascript ajax diy vbscript copenhagen denmark

Search

Feeds
RSS 2.0 feed All content
RSS 2.0 feed ajax
RSS 2.0 feed asp
RSS 2.0 feed aspnet
RSS 2.0 feed copenhagen
RSS 2.0 feed databases
RSS 2.0 feed denmark
RSS 2.0 feed diy
RSS 2.0 feed dotnet
RSS 2.0 feed html
RSS 2.0 feed japan
RSS 2.0 feed javascript
RSS 2.0 feed modding
RSS 2.0 feed photography
RSS 2.0 feed utilities
RSS 2.0 feed vbscript