Learning Resources

HTML5 Audio and Video

HTML5 introduces built-in media support via the and elements, offering the ability to easily embed media into HTML documents.

Embedding media

Embedding media in your HTML document is trivial:

1

2

3

<video src="https://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>

Your browser does not support the <code>videocode> element.

video>

This example plays a sample video, with playback controls, from the Theora web site.

Here is an example for embedding audio into your HTML document

1

2

3

<audio src="/test/audio.ogg">

<p>Your browser does not support the audio element.p>

audio>

The srcattribute can be a URL of the audio file or the path to the file on the local system.

1

2

3

<audio src="audio.ogg" controls autoplay loop>

<p>Your browser does not support the audio element p>

audio>

This code example uses attributes of the element:

controls : Displays the standard HTML5 controls for the audio on the web page.

autoplay : Makes the audio play automatically.

loop : Make the audio repeat (loop) automatically.

1

<audio src="audio.mp3" preload="auto" controls>audio>

The preloadattribute is used in the audio element for buffering large files. It can take one of 3 values:

"none" does not buffer the file

"auto" buffers the media file

"metadata" buffers only the metadata for the file

Multiple source files can be specified using the element in order to provide video or audio encoded in different formats for different browsers. For instance:

1

2

3

4

5

<video controls>

<source src="foo.ogg" type="video/ogg">

<source src="foo.mp4" type="video/mp4">

Your browser does not support the <code>videocode> element.

video>

This plays the Ogg file in browsers supporting the Ogg format. If the browser doesn't support Ogg, the browser uses the MPEG-4 file. See also the list of media formats supported by the audio and video elements in different browsers.

You may also specify which codecs the media file requires; this allows the browser to make even more intelligent decisions: