Creative Technology 10 - Embedding
Audio and Video in HTML
Introduction
This Learning Activity Sheet (LAS) is designed to help you understand how to embed audio
and video into a webpage using HTML. Multimedia elements like sound and video make
webpages more engaging and informative. Knowing how to use these features is essential
for any aspiring web developer.
Learning Objectives
After going through this LAS, you are expected to:
a. Identify the HTML tags used for embedding audio and video;
b. Write sample code using <audio> and <video> tags;
c. Understand and apply different attributes such as controls, autoplay, loop, and muted;
d. Create a webpage that plays audio and video content.
Pretest
1. Which HTML tag is used to embed audio?
A. <sound> B. <audio> C. <mp3> D. <media>
2. What does the 'controls' attribute do in a media tag?
A. Hides the file B. Adds player controls C. Loops the file D. Sets file format
3. Which file type is commonly used for HTML5 video?
A. .docx B. .pdf C. .mp4 D. .exe
4. Which attribute makes a media file play repeatedly?
A. autoplay B. muted C. loop D. startover
5. What does <source> do in a media tag?
A. Deletes the file B. Stores text content C. Specifies media file D. Prints code
Lesson: Embedding Audio and Video in HTML
HTML allows you to add sound and video files using the <audio> and <video> tags. These
tags make webpages more dynamic. Each tag uses <source> to indicate the file path and
type.
1. Embedding Audio
Example:
<audio controls>
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
2. Embedding Video
Example:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Common Attributes:
- controls: shows play, pause, and volume buttons
- autoplay: starts media automatically
- loop: repeats the media
- muted: starts muted
Activities
Activity 1: Identify the Tag
Indicate whether the following lines of code are for audio or video embedding.
<audio controls><source src="bg.mp3" type="audio/mpeg"></audio>
<video width="400" controls><source src="movie.mp4" type="video/mp4"></video>
<audio autoplay loop><source src="loop.ogg" type="audio/ogg"></audio>
<video muted autoplay><source src="clip.webm" type="video/webm"></video>
Activity 2: Fill in the Missing Code
Complete the HTML snippet below by adding the correct tags and attributes.
<______ width='640' height='360' ______>
<source src='sample.mp4' type='video/mp4'>
</______>
<______ ______>
<source src='sound.mp3' type='audio/mpeg'>
</______>
Activity 3: Web Page Task
Create an HTML file named "media.html" that includes:
- One audio player with controls and loop
- One video player with controls and autoplay
Reflection: 3-2-1
3 Things I Learned:
1. ____________________________
2. ____________________________
3. ____________________________
2 Uses of Audio and Video in a Website:
1. ____________________________
2. ____________________________
1 Question I Still Have:
____________________________
Posttest
1. Which HTML tag is used for videos?
A. <mp4> B. <media> C. <video> D. <movie>
2. Which attribute is used to play a media file continuously?
A. loop B. repeat C. cycle D. rotate
3. What goes inside the <source> tag?
A. Media description B. File size C. File path and type D. Text caption
4. What will happen if the browser does not support the media tag?
A. Page crashes B. Nothing displays C. Fallback text is shown D. File gets deleted
5. Why is embedding media important?
A. To make pages colorful B. To slow down the site C. To engage users D. To save
storage
References
- DepEd K to 12 Curriculum Guide – TLE: Creative Technology
- https://www.w3schools.com/html/html_media.asp
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
