Embedding audio and video with HTML

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which tag embeds a video file in a web page?

A <img src="clip.mp4" controls></img>

B <video src="clip.mp4" controls></video>

2. Which attribute gives the viewer play and pause buttons?

A controls

B buttons

3. Which attribute tells the browser which file to load into the <audio> element?

A href

B src

4. Which line embeds a sound file the viewer can play and pause?

A <audio src="song.mp3" controls></audio>

B <sound src="song.mp3" controls></sound>

5. A student writes <video src="intro.mp4"></video> with no other attributes. What will the viewer see?

A No play or pause buttons, because controls is missing

B A full set of play and pause buttons

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<video src="clip.mp4" controls></video>		AThe file name is written as text between the tags instead of being given in the src attribute, so no video loads. It should be <video src="clip.mp4" controls></video>.
2<audio src="song.mp3" controls></audio>		BThere is no controls attribute and no closing </audio> tag, so the viewer gets no play button. It should be <audio src="song.mp3" controls></audio>.
3Add the controls attribute so the viewer gets play and pause buttons on a video		C<video src="intro.mp4" controls>Video not supported.</video>
4Fallback text between the tags is shown if the browser cannot play the video		DEmbeds a sound file in the page with a player the viewer can use to play and pause it.
5<video controls>clip.mp4</video>		E<video src="intro.mp4" controls></video>
6<audio src="song.mp3">		FEmbeds a video file in the page and shows play and pause buttons for the viewer.

Definitions

Fill in the Blanks

Complete each line of code by filling in the missing parts.

<_____ src="clip.mp4" controls></video>

<video src="clip.mp4" controls> Your browser cannot play this video. </_____>

<_____ src="https://example.com/pod.mp3" controls></audio>

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <video src="dance.mp4"

B controls>

C Video not supported.

D </vidio>

Question 2

A <audio src="song.mp3"

B control>

C Audio not supported.

D </audio>

Question 3

A <video width="320"

B src="movie.mp4", controls>

C Video not supported.

D </video>

Question 4

A <video controls

B width="320"

C scr="intro.mp4">

D </video>

Question 5

A <sound controls

B src="theme.mp3">

C Audio not supported.

D </audio>

Answer Key

Embedding audio and video with HTML

Section A: Quick Questions

B — <video src="clip.mp4" controls></video>

A — controls

B — src

A — <audio src="song.mp3" controls></audio>

A — No play or pause buttons, because controls is missing

Section B: Match the Pairs

<video src="clip.mp4" controls></video> → Embeds a video file in the page and shows play and pause buttons for the viewer.

<audio src="song.mp3" controls></audio> → Embeds a sound file in the page with a player the viewer can use to play and pause it.

Add the controls attribute so the viewer gets play and pause buttons on a video → <video src="intro.mp4" controls></video>

Fallback text between the tags is shown if the browser cannot play the video → <video src="intro.mp4" controls>Video not supported.</video>

<video controls>clip.mp4</video> → The file name is written as text between the tags instead of being given in the src attribute, so no video loads. It should be <video src="clip.mp4" controls></video>.

<audio src="song.mp3"> → There is no controls attribute and no closing </audio> tag, so the viewer gets no play button. It should be <audio src="song.mp3" controls></audio>.

Section C: Definitions

<video controls> — The <video> element embeds a video in a page. Its src attribute gives the file, and controls adds play and pause buttons. The <audio> element works the same way for sound.

Section D: Fill in the Blanks

<video src="clip.mp4" controls></video>

<audio src="song.mp3" controls></audio>

<video src="trailer.mp4" controls></video>

<video src="clip.mp4" controls>
  Your browser cannot play this video.
</video>

<audio src="https://example.com/pod.mp3"
  controls></audio>

Section E: Spot the Error

D — The closing tag has a spelling mistake. It must match the opening tag, so it should be </video>.

B — The attribute that adds play and pause buttons is controls, with an s. It should be controls>.

B — HTML attributes are separated by spaces, not commas. The line should be src="movie.mp4" controls>.

C — The attribute name is misspelled. The file is given with src, not scr, so the video would not load.

A — There is no <sound> element in HTML. Audio is embedded with the <audio> element, so the line should be <audio controls.