<aside> <img src="/icons/list_purple.svg" alt="/icons/list_purple.svg" width="40px" />

By the end of this worksheet, you will be able to:

• Understand the purpose of the <audio> and <video>tags in HTML5 (and why they replaced older plugins like Flash.)
• Add audio and video to a web page with multiple <source> formats and fallback text for unsupported browsers.
• Use attributes such as controls and autoplay to manage playback options, and recognise the limitations of autoplay in modern browsers.
• Listen for media events (like ended and timeupdate) with jQuery and respond with actions on the page.
• Retrieve and work with the current playback time of a media file using .currentTime.
• Apply conditional logic (if statements) to trigger actions at specific points in playback.
• Distinguish between jQuery objects and raw DOM elements, and know when to use .get(0) or [0]. </aside>

Introduction

For a long time, Web designers had to rely on Adobe Flash or other clunky, proprietary third party plugins in order to deal with audio and video playback online. HTML5 changed this. The HTML specification includes specific tags for this purpose: <audio> and <video>. Browsers that support these tags offer native playback for audiovisual and audio-only media files.

<aside> <img src="/icons/light-bulb_blue.svg" alt="/icons/light-bulb_blue.svg" width="40px" />

For older browsers, the <audio> and <video> tags offer a ‘fall back’ – text, or other HTML, that is displayed telling the user that their browser is outdated. Browser support for these elements is quite good these days, but backwards compatibility is good to keep in mind.

</aside>

There are a number of formats available for media files, and there are a few quirks regarding interoperability, where some older browsers only support some formats. Luckily, the <audio> and <video> tags allow us to list multiple formats of an individual file, and the browser will play whichever one it can.

Things have gotten better recently, and as a general rule the majority of modern browsers will support the following file formats:

• Some videos sometimes use the .ogg extension. This is perfectly okay.

What can we do with audio and video?

The HTML5 <audio> and <video> tags are easily accessed and controlled by JavaScript (and therefore jQuery). We can also trigger events according to what’s happening in the playback of the media file. (For example, you could make a video disappear from the page once it had finished playing, or you could make a Google Map appear when the video gets 3 minutes and 27 seconds into its playback.) Pairing HTML5 media playback and jQuery opens some great opportunities for designers to produce rich content — and this is what we’re hoping you’ll do with the major projects.

Adding Media to a Web Page

HTML5 makes it easy to add video and audio to web pages using the <video> and <audio> tags. We’ll look at each one in turn.

<video>

This is example code of how to add video to a web page. In this example we assume that the video files (one encoded as MP4 and the other as OGV/OGG) are stored in a subfolder called ‘videos’.

<video>
	<source src="videos/trailer.mp4">
	<source src="videos/trailer.ogg">
	<p>Your browser doesn’t support HTML5. 😢 Please upgrade.</p>
</video>

Note that there are two <source> tags nested inside the <video> tag. Each one refers to the video in different formats so that it can be played on all modern browsers. A browser will move through the <source> tags until it finds a format it supports.