Home > Chapter Review and Exercises > Chapter 10 - Audio and Video
The HTML <video> Tag - includes all Optional Attributes
The HTML <audio> Tag - includes all Optional Attributes
Chapter 10 reviews the various types of media that can be embedded in a web page, including iframes, a multipurpose object element, video players, audio players, and canvas (a 2D raster drawing space that can be used for games and other interactive features).
In Chapter 10,you will learn the following:
How to create a nested browser window for displaying an external web page using the iframe element.
How to use the object and param elements to embed a variety of media types.
An introduction to the various codecs and containers used by competing video and audio formats, including the best supported options.
How to add a video to the page using the video element, along with fallback options.
How to add an audio player to a page using the audio element, with fallbacks.
Using the track element to attach synchronized text to audio and video (for example, subtitles, captions, descriptions, chapter titles, and other metadata).
A brief introduction to the canvas element for creating drawings and interactive games and features on a web page using JavaScript.
embedded content
Content that imports another resource into the document, or content from another vocabulary that is inserted into the document.
nested browsing context
A viewport (browser window) that is embedded in another viewport.
encoding NOTES
The algorithm used to convert a media source to 1s and 0s and how that data is compressed.
container format
The file that packages the compressed media and its metadata.
HTML5 canvas
An API for embedding a 2D drawing space on a web page that uses JavaScript functions for creating lines, shapes, fills animations, interactivity and so on. It is often used for interactive features and games.
10-1: Embedding a video with iframe
In this exercise, you will create an iframe on the page for embedding a YouTube video.
10-2: Embedding a video player
Two video files (provided) are added to a web page with the video element.
You’ve looked at all sorts of ways to stick things in web pages in this chapter. You’ve seen how to use iframe to create a “window-in-a-window” for displaying external web resources; object for resources that require plug-ins, video and audio players; and the canvas 2-D scriptable drawing space. Now see if you were paying attention.
1. What is a “nested browsing context,” and how would you create one?
2. Why would you use the sandbox attribute with an iframe?
3. Name some instances when you might need to know the MIME type for your media file.
4. Identify each of the following as a container format, video codec, or audio codec:
a. Ogg ____________________
b. H.264 ____________________
c. VP8 ____________________
d. Vorbis ____________________
e. WebM ____________________
f. Theora ____________________
g. Opus ____________________
h. MPEG-4 ____________________
5. What does the poster attribute do?
6. What is a .vtt file?
7. List at least two differences between SVG and Canvas.
8. List the two Canvas API functions you would use to draw a rectangle and fill it with red. You don’t need to write the whole script.
<iframe>
The <iframe> element uses the src attribute to identify the URL of the website it is linking to.
Use CSS to set the height and width: style="height: 200px; width: 300px;"
To change the <iframe> default border: style="border: 2px solid red;"
To remove the default <iframe> border use: style="border: none;"
<video>
The <source> element identifies the video that is to be played
The autoplay attribute starts the video automatically.
The controls attribute displays the video controls.
To set the width and height, use these attributes: width="320" height="240"
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button, for example: poster="/images/w3html5.gif"
<audio>
The <source> element identifies the video that is to be played: <source src="horse.mp3">
The autoplay attribute starts the video automatically.
The controls attribute displays the video controls.