HTML5 audio and video

<pageby nominor="false" comments="false"/>

Introduction

This tutorial shows basic use of video and audio in HTML5. HTML5 includes special elements (tags) allowing to include video and audio and to define controls. Unlike in HTML 4.x and XHTML 1.x, video and audio is fully integrated in HTML5, meaning that these elements can also be styled and scripted via the DOM.

Before learning how to use video and audio in HTML5, you need to understand that media files are actually containers (i.e. so-called Multimedia container formats) that include in turn various types of data files, e.g. video and audio streams, chapter-information, captions (subtitles) and meta-information plus synchronization information. Audio and video data are compressed with so-called codecs (compression and decompression algorithms).

Browser support

As of April 2011, so this may rapidly change. Also, there may be mistakes, e.g. we did not test Safari and Android ourselves. In addition, the same browser may behave differently on different operating systems. Test it yourself, e.g. by using our simple example file ...). Or better, explore the links at the end of this article for more exhaustive and up-to-date information.

The most popular HTML5 video formats are webm/VP8, mp4/H.264 and OGG/Theora (ogv). Originally, the HTML5 specification wanted include OGG as standard, but after vendor opposition, it was decided to support all formats.

The following table provides an overview of implementations as of April 2012. It does not include browser extensions that will add extra functionality. See Wikipedia's HTML5 for more detailed information.

Browser implementations of various Video formats

Browser	Formats natively supported by different web browsers (April 2012)
	ogv (Theora/Vorbis)	mp4 (H.264/AVC	webm (VP8/Vorbis)
IE (9)	No	Yes	No
Firefox (11)	Yes	no	Yes
Chrome	Yes	Yes	Yes
Safari	No	Yes	No
Opera	Yes	No	Yes
Android	Yes	Yes	Yes

The example video we are using is this page was taken from Vimeo. It includes a 2011 talk about the state of Wikipedia by Jimmy Wales, its founder. We produced several versions without paying a lot of attention to encoding details.

Browser support for audio, as for Video, is not uniform

Browser implementations of various audio formats

	Ogg Vorbis (.ogg)	WAV PCM (.wav)	MP3 (.mp3)	AAC (.m4a)
IE	no	no	yes	yes
Firefox	yes	yes	no	no
Chrome	yes	yes	yes	yes
Safari	?	yes	yes	yes
Opera	yes	yes	no	no
Android	?	?	yes	?

Basic use of video

While the video tag and its attributes are standardized, the video formats (i.e. containers and codecs) are not. For this reason, it is good practice to include several variants of the same file. Since the HTML5 video element doesn't work with older browsers and since default skin and controls differ among browser makers, you also may consider using an HTML5 video player library.

Example file: http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html (also look at its source code).

Too simple use

The following example code shows how to include a single video format. We will show three variants, one for each of popular the HTML5-supported formats. Including a single variant is not recommended. See below for defining alternatives.

<video src="videos/state-of-wikipedia-480x272.ogv" controls>
Sorry, your browser doesn't support HTML5 video
</video>
<p>This example wouldn't work in a browser like IE9 
   that doesn't support Ogg</p>

<video src="videos/state-of-wikipedia-480x272.mp4" controls>
Sorry, your browser doesn't support HTML5 video
</video>
<p>This example wouldn't work in a browser like Firefox 
   that doesn't support mp4</p>

<video src="videos/state-of-wikipedia-480x272.webm" controls>
Sorry, your browser doesn't support HTML5 video
</video>
<p>This example wouldn't work in a browser like IE9
   that doesn't support webm</p>

Simple use of alternatives

The following code shows how to define three alternatives with a fallback message for non HTML5 browsers.

<video id="movie1" controls>
  <source src="videos/state-of-wikipedia-480x272.mp4">
  <source src="videos/state-of-wikipedia-480x272.ogv">
  <source src="videos/state-of-wikipedia-480x272.webm">
  Your browser doesn't support HTML5. Maybe you should upgrade.
</video>

The following code shows how to define alternatives that specify codecs. This method is useful if you plan to include "high quality" videos that some clients may not support.

<video id="movie2" controls>
  <source src="videos/state-of-wikipedia-480x272.mp4" 
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="videos/state-of-wikipedia-480x272.ogv"
          type='video/ogg; codecs="theora, vorbis"' />
  <source src="videos/state-of-wikipedia-480x272.webm"
          type='video/webm; codecs="vp8, vorbis"' />
	<p>The video is available as <a href="videos/state-of-wikipedia-480x272.mp4">H.264 in an MP4 container</a>, 
	or as <a href="videos/state-of-wikipedia-480x272.ogv">VP8 in a Ogg container</a>
	or as <a href="videos/state-of-wikipedia-480x272.webm">VP8 in a
	WebM container</a>. </p>
</video>

The HTML5 video element

Content model

• The video element can not be used inside the a and the button elements
• The video element must have both a start and an end tag. I.e. it can't be self-closed.
• The video element either must include a single src attribute or one or more source elements followed by track elements, followed by any sort of or flow contents, i.e. all sorts of stuff, but that only will be shown as fallback).

Parameters of the video element

HTML5 attributes work like HTML4 attributes, i.e. so-called boolean attributes dont' need to include a value. In addition, it seems that attribute values don't need to be quoted in HTML5. The following three lines are strictly equivalent.

 controls
 controls="controls"
 controls=""

Allowed video attributes:

• global attributes & autoplay & preload & controls & loop & poster & height & width & mediagroup & muted & src

src = "source file"

Allows to define a single video file. See the source element below for a better alternative.

Example:

 src="myfile.webm"

poster = "picture file"

Will display a picture while the video downloads and before the user decides to play the video. If absent, the first frame of the video will be shown.

Example:

 src="vaction_picture.jpg"

controls = on|off

Defines if use controls should be displayed. By default there will be none.

Examples:

controls

controls = "controls"

width and height = "size"

Allow to define size of the video element

By default, width and height will adapt to the original size.

Example

 width="500"
 height="400"

autoplay = on|off

If present, the video will start playing automatically. This can be annoying since the user may not want to look at it.

Example

 autoplay

muted = on|off

If present, will mute the audio

Example

 muted

preload = none | metadata | auto

Since most browsers will automatically start downloading the whole video, one could use this attribute to help the users save bandwith (in particular on mobile devices and slow home networks).

Example: The author hints that nothing should be downloaded.

 preload="none"

Example: Enough data should be downloaded to show a frame and to determine duration.

 preload="metadata"

Example: browser should download as much as it sees fit to give a good user experience, possibly downloading the whole video.

 preload=""
 preload="auto"

autobuffer (deprecated element, don't use this !)

If present, will start downloading the whole video after the page is loaded. Also use with care, because this will take up bandwidth.

 autobuffer

loop = on | off

If present, will loop

 loop

style = "CSS style"

CSS style properties

mediagroup = "string with resources"

Will tell the the client to link multiple video and audio streams

Example (needed)

Web server configuration

Your web server must define all the mime types, else web browsers may not display video/audio.

In particular, either add the following mime types in the mime.types file

video/ogg ogg ogm ogv
video/mp4 mp4
video/webm webm
audio/mpeg mpga mp2 mp2a mp3 m2a m3a
audio/ogg oga ogg spx
audio/mp4 mp4a

On an Apache server, you also could edit an http.conf file like this:

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
AddType audio/mpeg mpga mp2 mp2a mp3 m2a m3a
AddType audio/ogg oga ogg spx
AddType audio/mp4 mp4a
AddType audio/playlist m3u M3U

If you don't have administrator rights, you could add them on a per directory basis, e.g. put the above list of AddTypes in the .htaccess file on Apache.

The audio element

The audio element is very similar to the video element. It includes the same content model (must not be within an a or a button) and can include source elements, followed by track elements followed by flow elements or phrasing content.

Permitted attributes are mostly the same:

• global attributes & autoplay & preload & controls & loop & mediagroup & muted & src
• Audio doesn't support the poster attribute (wouldn't make sense).

Example file: http://tecfa.unige.ch/guides/html/html5-audio/html5-audio-simple.html (also look at its source code).

Simple use with control

Ogg

<audio src="audio/guitar.ogg" controls>
  Sorry, your browser doesn't support HTML5 audio
</audio>

MP3

<audio src="audio/guitar.mp3" controls>
  Sorry, your browser doesn't support HTML5 audio
</audio>

Alternatives

<audio id="movie1" controls>
  <source src="audio/guitar.mp3">
  <source src="audio/guitar.ogg">
  <source src="audio/guitar.m4a">
  <source src="audio/guitar.wav">
Your browser doesn't support HTML5. Maybe you should upgrade.
</audio>

Simple background music

<audio id="movie1" autoplay loop>
 <source src="audio/guitar.mp3">
 <source src="audio/guitar.ogg">
 <source src="audio/guitar.m4a">
 <source src="audio/guitar.wav">
 Your browser doesn't support HTML5. Maybe you should upgrade.
</audio>

There is no attribute for the volume, but there is JavaScript ...

The source element

The source element must be either a child of the video or the audio element.

It can include the so-called global attributes (like "style" or "id"). It's proper attributes are:

src ="URL" (mandatory)

Identifies the video file

type="MIME type"

Allows to identifies the mime type of the media source plus precise codes.

Examples

 type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'
 type="video/mp4;codecs='avc1.42E01E, mp4a.40.2'"

media

Can define a media type to help the client selecting the right video source.

The track element

The track element allows to add captions (subtitles) and other information, i.e. allow to add textual information that can be displayed to the user. However, track currently (April 2012) is not implemented in most browsers. In addition, the supported track file formats still seem to be a very moving target. In addition, some file formats like webm also may include their own "track" data.

Example code fount at Mozilla. Tracks may not yet work in your browser. Also there seems to be still discussion about the mandatory and optional track file formats. E.g. besides SRT, WebVTT and timed text (used in Flash) are also contenders.

<video src="sample.ogv">
   <track kind="captions" src="sampleCaptions.srt" srclang="en">
   <track kind="descriptions" src="sampleDesciptions.srt" srclang="en">
   <track kind="chapters" src="sampleChapters.srt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.srt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.srt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.srt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.srt" srclang="oz">
   <track kind="metadata" src="keyStage1.srt" srclang="en" label="Key Stage 1">
   <track kind="metadata" src="keyStage2.srt" srclang="en" label="Key Stage 2">
   <track kind="metadata" src="keyStage3.srt" srclang="en" label="Key Stage 3">
</video>

Track attributes

kind

Kind of text track. The following keywords are allowed according to Mozilla:

subtitles: A transcription or translation of the dialogue.

captions: A transcription or translation of the dialogue or other sound effects. Suitable for users who are deaf or when the sound is muted.

descriptions: Textual descriptions of the video content. Suitable for users who are blind or not able to view the video for another reason.

chapters: Chapter titles, intended to be used when the user is navigating the media resource.

metadata: Tracks used by script. Not visible to the user.

src (mandatory)

Defines the URL for the track file

srclang

Defines the language of the track text, so that the user and/or the client can make a choice

label

A user-readable title of the text track Used by the browser when listing available text tracks.

default

Identifies a track as default track. It only can be used with one track (of course).

Style and controlling media playback

In addition to using the width and height attribute for the video tag, you can use any reasonable and not reasonable CSS properties.

<video id="movie1" controls preload="metadata" 
          style="float:right;
                 margin: 0px 10px 0px 10px;
                 border-style: solid;
                 border-width: 50px 50px 50px 50px;
                 border-image: url(bricks.jpg) 50 round;
                 -webkit-border-image: url(bricks.jpg) 50 round;
                 -moz-border-image: url(bricks.jpg) 50 round;
                 ">
 <source src="videos/state-of-wikipedia-480x272.mp4">
 <source src="videos/state-of-wikipedia-480x272.ogv">
 <source src="videos/state-of-wikipedia-480x272.webm">
 Your browser doesn't support HTML5. Maybe you should upgrade.
</video>

• Life example file: http://tecfa.unige.ch/guides/html/html5-video/html5-video-with_style.html

Users can control playback through the default player. However, in case you don't want to use the control attribute, you can implement your own through JavaScript. An other alternative is to work with a Player library (see below).

Below is an audio control example found in the Using audio in video in Firefox tutorial

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>

• Life example file: http://tecfa.unige.ch/guides/html/html5-audio/html5-audio-background.html

HTML5 player libraries

Since default controls in navigators do not offer a lot of functionality and since there still many non-HTML5 navigators installed, so-called HTML video-players can offer both advanced controls and fallback. In addition, web designers may not like their visual aspect and may want to adapt it to the page design. This can be achieved with JavaScript programming or by using ready-to-go JavaScript libraries.

These players are implemented with JavaScript, offer different functionality and may or may not be easy to use. More precisely, this principle can be explained by example: “An HTML5 Video Player is a JavaScript library that builds a custom set of controls over top of the HTML5 video element to provide a consistent look between HTML5 browsers. Video.js builds on this by fixing many cross browser bugs or inconsistencies, adding new features that haven't been implemented by all browsers (like fullscreen and subtitles), as well as providing one consistent JavaScript API for both HTML5, Flash, and other playback technologies.” (What's an HTML5 Video Player, retrieved 13:36, 22 April 2012 (CEST) from vidojs.com). Other player products could be described in the same way.

Some of HTML5 players are:

• HTML5 Video & Media JavaScript Library
• Video.js
• Mediaelement.js
• jMediaelement

HTML5 Video.org offers a HTML5 Player Comparison, i.e. provide and overview table plus a detailed description of each HTML5 Player library. Recommended reading.

Video capturing

(to do ....)

Links

Specifications

• HTML5: The Markup Language HTML: The Markup Language An HTML language reference], W3C Working Draft 15 March 2012, by Michael Smith, W3C. (Multi-page version)
  • video – video
  • audio – audio stream

• WebRTC 1.0: Real-time Communication Between Browsers, W3C Editor's Draft 16 March 2012. This specification defines a set of APIs to represent streaming media, including audio and video, in JavaScript, to allow media to be sent over the network to another browser or device implementing the appropriate set of real-time protocols, and media received from another browser or device to be processed and displayed locally.

• getusermedia: Getting access to local devices that can generate multimedia streams. W3C Editor's Draft 22 December 2011. This document defines a set of APIs that allow local media, including audio and video, to be requested from a platform.

Manuals and reference

• HTML/Elements/video (W3C wiki)
• element/video (Mozilla)
• element/audio (Mozilla)
• HTML5 video (Wikipedia)
• HTML5 audio (Wikipedia)

Tutorials

• Towards Video on the Web with HTML5 by Daoust, Francois; Hoschka, Philipp; Patrikakis, Charalampos Z (2010)
• Using HTML5 audio and video, Mozilla (also useful for other browsers)
• Introduction to HTML5 video by Lawson, Bruce; Lauke, Patrick H., Opera. (2010-02-11)
• Everything you need to know about HTML5 video and audio by Pieters, Simon at Opera (2010-03-03)
• Video for everybody (shows how to use videos that also will work in older browsers)
• How to Use HTML 5 to Display Video in Modern Browsers by By Jennifer Kyrnin, About.com Guide
• Getting Started - Navigating HTML5, at HTML5video.org. Actually not much of a getting started article, but rather about history and strategy.

Web sites

• HTML5Video.org

Example code

• http://playground.html5rocks.com/#video_element
• MediaEvents Demo (W3C)