2.3. Adding Videos and Audio (25 minutes)
EEmbedding Videos Using the Tag
HTML5 introduced the <video> tag, which allows videos to be embedded directly into web pages without needing external plugins like Flash. The <video> tag provides attributes and functionality that let users play, pause, and control video playback within the browser.
Here's an example of how to embed a video in HTML:
// Some code
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Explanation of the Code:
<video>: This is the main tag that wraps the video content.
width and height: These attributes control the dimensions of the video player.
controls: This attribute adds play, pause, volume, and other media controls to the video player.
<source>: Specifies the video file and its type.src: The path or URL of the video file.
type: Specifies the format of the video (e.g., video/mp4 for MP4 files).
Fallback Content: The text "Your browser does not support the video tag." is a fallback that appears if the browser does not support HTML5 videos.
Multiple <source> tags can be used to provide different video formats, ensuring better browser compatibility. For example:
// Some code
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>Embedding Audio Using the <audio> Tag
Similar to the <video> tag, HTML5 also introduced the <audio> tag to embed audio files directly into a webpage.
Here's an example of how to embed audio:
// Some code
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>Explanation of the Code:
<audio>: The tag used to define audio content.controls: Adds controls to the audio player, such as play, pause, and volume.
<source>: Specifies the audio file and its format.src: The path or URL of the audio file.
type: Specifies the format of the audio file (e.g., audio/mp3 for MP3 files).
Fallback Content: If the browser does not support the audio tag, it will display the fallback message.
As with videos, you can provide multiple audio formats to ensure compatibility with different browsers:
// Some code
<audio controls>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Activity: Have students embed a video or audio file onto their webpage using a sample file or a URL.
Students Activity :
Objective:
Students will practice embedding videos or audio files into their existing HTML webpage. They can either use a local media file or a publicly available URL for their video or audio source.
Activity Steps:
Choose a Video or Audio File:
Provide students with a sample video or audio file, or allow them to find one online.
Alternatively, students can use a public video or audio URL for the activity.
Example video URL:
https://www.w3schools.com/html/mov_bbb.mp4
Example audio URL:
https://www.w3schools.com/html/horse.mp3
https://www.computerhope.com/jargon/m/example.mp3
Open the Existing HTML File:
Ask students to open their existing HTML file (e.g., exercise.html) using a text editor (such as Notepad or Visual Studio Code).
Embed a Video:
Students can add a video to their webpage using the following HTML code:
// Some code
<h2>My Video</h2>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video
with="320" height="240"
src="https://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4"
controls ></video>Embed an Audio File:
Alternatively, students can embed an audio file using the following code:
// Some code
<h2>My Audio</h2>
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>Save and Preview the Webpage:
After embedding the video or audio, students should save their HTML file and open it in a browser to see the media content.
They should check that the media file plays correctly and that the controls (e.g., play, pause) are functional.
Experiment with Size and Formats:
Encourage students to experiment with different width and height values for the video player.
If students have multiple formats of the same media file, ask them to try using multiple <source> tags to provide different formats for better browser compatibility.
Discussion and Reflection:
Once students have embedded the media files and tested them, lead a discussion on the following questions:
What happens if the browser doesn't support the video or audio tag?
Why is it important to provide multiple formats (like MP4 and OGG) for videos and audio?
How does embedding media files enhance the user experience of a website?
Extended Activity (Optional):
For students who finish early or want additional practice, suggest the following:
Adding Multiple Media Files:
Ask students to embed both a video and an audio file on the same page, with descriptive headings:
// Some code
<h2>My Video and Audio</h2>
<video width="400" height="300" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>Customizing with CSS:
Suggest that students style their video or audio players using CSS. For example, they could center the media player on the page or adjust margins and padding for better spacing.
By the end of this activity, students will have a solid understanding of how to embed both video and audio files into their webpages. They will also gain experience in working with media elements and ensuring cross-browser compatibility through multiple source formats.
Last updated