Webucator's Free HTML Training Tutorial

Lesson: Audio and Video

Welcome to our free HTML Training tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

In this lesson, you will learn how to use the audio and video elements.

Lesson Goals

Learn how to use the <audio> tag.
Learn how to use the <video> tag.

Supported Media Types

Where once there were several file formats we needed to include to ensure that all browsers would play our media, we can now use one format:

For audio, use MP3.
For video, use MP4.

Mime Types

Your web server must be configured to serve audio and video files with the proper mime type.

For information on adding mime types to IIS, see Adding Static Content MIME Mappings <mimeMap>.
For information on adding mime types to Apache HTTP Server, see How to set up your server to send the correct MIME types

This will not be an issue for this class if you are opening the files locally.

The audio Element

Adding audio to an HTML page couldn't be more simple. At its most basic, the tag looks like this:

<audio src="audio-file.mp3"></audio>

However, the above code would not do anything or even show up on the page. (Open AudioVideo/Demos/audio-useless.html in your editor and then in your browser for proof.)

To give the user the ability to play and pause the audio, you need to add the controls attribute as shown in the following demo. Open the demo in your browser to see (and hear!) it work.

AudioVideo/Demos/audio-controls.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Audio - controls</title>
</head>
<body>
<h1>Audio - controls</h1>
<article>
  <h2>Casey at the Bat</h2>
  <h3>By Ernest Lawrence Thayer</h3>
  <h4>from the San Francisco Examiner - June 3, 1888</h4>
  <audio src="../media/casey-at-the-bat.mp3" controls></audio>
  
  <p>The Outlook wasn't brilliant for the Mudville nine that day:<br>
  The score stood four to two, with but one inning more to play.<br>
  And then when Cooney died at first, and Barrows did the same,<br>
  A sickly silence fell upon the patrons of the game.</p>
---- C O D E   O M I T T E D ----

Code Explanation

The controller looks different in different browsers and there is no way to customize the controller using CSS. Chrome's controller is shown below: Chrome's audio controller

Audio Formats

Using .mp3 audio is safe for recent versions of all browsers. As mentioned above, if you should have a need to serve users with older browsers (in a corporate intranet, say) you can provide multiple audio file formats. Instead of using the <audio> tag's src attribute, you can nest one or more <source> tags within the <audio> tag, each with its own src attribute and a type attribute to let the browser know if the file is of a mime type that it supports (and therefore should bother loading). Browsers will use the first file they support. The code sample below shows how to make our audio element work in browsers that support Ogg or MP3 files:

AudioVideo/Demos/audio-multiple-sources.html

---- C O D E   O M I T T E D ----
  <audio controls>
    <source src="../media/casey-at-the-bat.ogg"
      type="audio/ogg; codecs=vorbis">
    <source src="../media/casey-at-the-bat.mp3" type="audio/mpeg">
  </audio>
---- C O D E   O M I T T E D ----

audio Tag Attributes

Attribute	Description
`src`	Points to the audio file. Used when there are no nested `source` elements.
`controls`	Boolean. If present, indicates that controller will be displayed.
`preload`	Possible values: `auto`: Browser should choose whether to preload the file. `metadata`: Browser should preload only the metadata as the user is not likely to need the file. This is the default. `none`: Browser should not preload anything as the user is likely not to need the file.
`autoplay`	Boolean. If present, audio will begin to play as soon as it has loaded. Note that browsers have different autoplay policies, so you cannot be sure that your audio will autoplay. As such, you should be sure to provide controls for the user to start the audio manually.
`loop`	Boolean. If present, audio repeats indefinitely.

We have already discussed the src and controls attributes.

preload

The preload attribute is relatively self-explanatory. You should set it to "auto" if you know the browser will need to download the file (i.e., you know the audio will be played). Otherwise, you can most likely leave it out or set it to "metadata" (the default).

autoplay

You can instruct the browser to automatically play the audio file when the page loads, but again, browsers have different autoplay policies, so you cannot be sure that the audio will actually start playing.

AudioVideo/Demos/audio-autoplay.html

---- C O D E   O M I T T E D ----
<audio src="../media/casey-at-the-bat.mp3" controls autoplay></audio>
---- C O D E   O M I T T E D ----

Code Explanation

Open the file to hear the poem.

loop

The loop attribute simply makes the audio file restart again when it reaches the end.

AudioVideo/Demos/audio-loop.html

---- C O D E   O M I T T E D ----
  <div>
    <p>
      <strong>Add Cheering</strong>: 
      <small>- downloaded from 
      <a href="https://bit.ly/freesound-cheering">The Freesound Project</a>
      </small>
    </p>
    <audio src="../media/cheer.mp3" controls loop></audio>
  </div>
---- C O D E   O M I T T E D ----

Code Explanation

You can now add cheering when Casey comes to bat.

The video Element

The video element is very similar to the audio element. Like with audio, it can be as simple as:

<video src="video-file.mp4"></video>

Using the .mp4 file format will work for recent versions of all browsers.

video Tag Attributes

Attribute	Description
`src`	Points to the video file. Only used when there are no nested `source` elements.
`controls`	Boolean. If present, indicates that controller will be displayed.
`preload`	Possible values: `auto`: Browser should choose whether to preload the file. `metadata`: Browser should preload only the metadata as the user is not likely to need the file. This is the default. `none`: Browser should not preload anything as the user is likely not to need the file.
`autoplay`	Boolean. If present, video will begin to play as soon as it has loaded. Note that browsers have different autoplay policies, so you cannot be sure that your video will autoplay. As such, you should be sure to provide controls for the user to start the video manually.
`loop`	Boolean. If present, video repeats indefinitely.
`height`	Height in pixels. You should use the actual height of the video.
`width`	Width in pixels. You should use the actual width of the video.

The syntax for a <video> tag with all of these attributes is shown below:

<video src="video-file.mp4" controls preload="auto" autoplay loop height="600" width="800"></video>

Alternate File Formats

As with audio, you can include alternate file formats if you need to serve the needs of an audience using older browsers by providing multiple source options. And, as with audio, browsers will use the first file they find that they support.

Video

Duration: 10 to 15 minutes.

In this exercise, you will create an HTML file from scratch that plays video files.

Create a new HTML file called video.html in the AudioVideo/Exercises directory.
Write the code to play the ../media/justin.mp4 video. The height and width of the video are 480px and 640px, respectively.
Play around with video attributes such as: controls, autoplay*, and loop.

*Remember that autoplay doesn't work on all browsers.

Solution:

AudioVideo/Solutions/video.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Video - controls</title>
</head>
<body>
<h1>Video - controls</h1>
<video src="../media/justin.mp4" controls autoplay
  height="480" width="640"></video>
</body>
</html>

Closed Captioning and Subtitles

The HTML specification includes a <track> element, which can be used to provide subtitles and other metadata from audio and video files.

Learning to create tracks involves learning to create subtitle files, which is beyond the scope of this course.

To learn more about tracks, check out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track.

Easier Closed Captioning Alternatives

Creating and hosting your own videos and making sure they are accessible can be a challenge. In addition, it comes with the downside of having to allocate server space for the videos and to make sure you have the bandwidth to deliver them. Often, a better alternative is to host the videos on YouTube. Check out YouTube's video on creating subtitles and closed captions.

In addition, video-creation software such as Camtasia and Captivate provide closed captioning features within their tools.