Welcome to our free HTML Training tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.
YOU WILL LIKELY NEED TO CLEAN UP THE FOLLOWING INTRODUCTION:
In this lesson, you will learn how to use the audio
and video
elements.
Lesson Goals
<audio>
tag.<video>
tag.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:
Your web server must be configured to serve audio and video files with the proper mime type.
This will not be an issue for this class if you are opening the files locally.
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.
To give the user the ability to play and pause the audio, you need to add the controls
attribute, which can be minimized as shown in the following demo. Open the demo in your browser to see (and hear!) it work.
<!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 ----
The controller looks different in different browsers and there is no way to customize the controller using CSS. Chrome's controller is shown below:
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 all modern browsers.
---- 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 ----
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:
|
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.
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).
You can get the audio file to automatically play when the page loads as shown in the following demo.
---- 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 ----
Open the file to hear the poem.
And the loop
attribute simply makes the audio file restart again when it reaches the end.
---- 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 ----
You can now add cheering when Casey comes to bat.
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 .mp4 file format will work for recent versions of all browsers.
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:
|
autoplay
|
Boolean. If present, video will begin to play as soon as it has loaded. |
loop
|
Boolean. If present, video repeats indefinitely. |
height
|
Height in pixels. You should use the actual height of the video. |
width
|
Width in pixels or percentage. You should use the actual width of the video. |
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.
In this exercise, you will create an HTML file from scratch that plays video files.
controls
, autoplay
, and loop
.<!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>
The HTML specification includes a <track>
element, which can be used to "provide captions or subtitles for video content, and also text video descriptions, chapters for content navigation, and more generally any form of metadata that is time-aligned with audio or video content." To learn more, check out https://www.w3.org/TR/webvtt1/.