HTML
Advanced
30 mins
Teacher/Student led
95 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

Embedding Audio and Video

In this lesson, you'll first understand the audio and video formats supported by HTML5. You'll then learn to embed audio and video files into your web page using HTML5 tags. Finally, you'll preview your work, test the playback, and reflect on your learning.
Learning Goals Learning Outcomes Teacher Notes

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    1 - Understanding Supported Formats

    Before we start, it's important to know which file formats are supported by HTML5 multimedia elements. Different web browsers support different formats, so it's a good practice to provide multiple sources for compatibility. In this step, we will learn about the most common audio and video formats supported by HTML5 and their compatibility with various web browsers.

    For audio, the most common formats are:

    • MP3: Supported by all major browsers, including Chrome, Firefox, Safari, and Edge.
    • WAV: Supported by all major browsers, except for Internet Explorer.
    • OGG: Supported by Chrome, Firefox, and Opera, but not by Safari and Edge.

    For video, the most common formats are:

    • MP4: Supported by all major browsers, including Chrome, Firefox, Safari, and Edge.
    • WebM: Supported by Chrome, Firefox, and Opera, but not by Safari and Edge.
    • OGG: Supported by Chrome, Firefox, and Opera, but not by Safari and Edge.

    When embedding audio and video files in your web pages, it's essential to use supported file formats to ensure that your multimedia content can be played on various web browsers. Providing multiple sources in different formats can help improve compatibility and user experience. In the next steps, we will learn how to embed audio and video files using the HTML5 <audio> and <video> tags, and how to provide multiple sources for better compatibility.



    2 - Embedding Audio

    In this step, we will embed an audio file into our web page using the <audio> tag. We will provide an MP3 file as the source. If the browser doesn't support this format, it will display the message 'Your browser does not support the audio element.'

    Add the following code to your HTML file:

    <audio controls> 
    	<source src="https://www.123code.org/lessonfiles/audio/guitar-riff.mp3" type="audio/mpeg"> 
        Your browser does not support the audio element. 
    </audio>

    3 - Embedding Video

    In this step, we will embed a video file into our web page using the <video> tag. This will create a video player with controls and a specified width and height. Add the following code the audio player code:

    <video controls width="640" height="360"> 
    	<source src="https://www.123code.org/lessonfiles/video/puppy.mp4" type="video/mp4"> 
        Your browser does not support the video element. 
    </video>

    This code provides an MP4 file as the source. If the browser doesn't support this format, it will display the message 'Your browser does not support the video element.'

    4 - Preview Your Work

    In this step, you will preview your work by testing the audio and video players in the embedded playground. You will also try out different video dimensions to see how they affect the appearance of the video player.

    First, add the following code to the playground:

    <audio controls> 
    	<source src="path/to/your/audiofile.mp3" type="audio/mpeg"> 
    </audio> 
    <video controls width="320" height="240"> 
        <source src="path/to/your/videofile.mp4" type="video/mp4"> 
    </video>

    Replace path/to/your/audiofile.mp3 and path/to/your/videofile.mp4 with the URL paths to audio and video files that you find by searching for sample audio and video files on the internet.

    Now, test the playback of both the audio and video players to ensure everything works as expected. Try changing the values of width and height attributes in the <video> tag to see how it affects the appearance of the video player.

    5 - Review and Reflect

    Congratulations! You have successfully embedded audio and video files into your web page using the HTML5 <audio> and <video> tags. Now, let's review and reflect on what you've learned.

    Keep practicing and experimenting with different multimedia elements to enhance your web pages. Great job!

    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more