HTML5 Multimedia Practice Questions with Solutions

By /

HTML5 introduced native multimedia support, allowing developers to add audio and video directly into webpages without relying on third-party plugins like Adobe Flash.

Before HTML5, playing multimedia on a website often required external software or browser plugins. HTML5 solved this problem by introducing the <audio> and <video> elements, making multimedia faster, more secure, and compatible across modern browsers. HTML5 Multimedia practice questions with Solutions help to understand the concepts.

Today, HTML5 multimedia is widely used in:

  • Online learning platforms
  • Music streaming websites
  • Video streaming services
  • Company presentations
  • Product demonstrations
  • News portals
  • Portfolio websites
  • Entertainment websites

By learning HTML5 multimedia, you’ll be able to build interactive and engaging webpages that support modern web standards.

Why Learn HTML5 Multimedia?

HTML5 multimedia helps you:

  • Embed audio and video without plugins.
  • Improve user engagement.
  • Create interactive websites.
  • Support modern browsers.
  • Improve website performance.
  • Build professional media-rich webpages.

Common Multimedia Elements

ElementPurpose
<audio>Embeds audio files
<video>Embeds video files
<source>Specifies multiple media sources
controlsDisplays playback controls
autoplayPlays media automatically
loopRepeats media continuously
mutedStarts media without sound
posterDisplays an image before a video starts

1. Add an Audio File to a Webpage

Problem Statement

Create a webpage that plays an audio file using the HTML5 <audio> element.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>HTML5 Audio Example</title>

</head>

<body>

    <h1>Welcome to HTML5 Audio</h1>

    <audio controls>

        <source src="music.mp3" type="audio/mpeg">

        Your browser does not support the audio element.

    </audio>

</body>

</html>

Expected Output

Welcome to HTML5 Audio

▶️ Play | Pause | Volume

The browser displays a built-in audio player with playback controls.

Explanation

The <audio> element embeds audio directly into a webpage.

The <source> element specifies:

  • Audio file location
  • Audio file type

If the browser cannot play the file, it displays the fallback message:

Your browser does not support the audio element.

Concepts Covered

  • <audio>
  • <source>
  • HTML5 Multimedia

2. Add Audio Playback Controls

Problem Statement

Create an audio player that includes built-in playback controls.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Audio Controls</title>

</head>

<body>

    <h1>Music Player</h1>

    <audio controls>

        <source src="song.mp3" type="audio/mpeg">

    </audio>

</body>

</html>

Expected Output

Music Player

▶️ Pause ⏸️ Volume 🔊 Timeline

Explanation

The controls attribute displays the browser’s default audio controls.

These usually include:

  • Play
  • Pause
  • Progress Bar
  • Volume Control
  • Playback Duration

Without the controls attribute, users cannot interact with the audio player.

Concepts Covered

  • controls
  • Audio Player
  • HTML5 Audio

3. Play Audio Automatically

Problem Statement

Create an audio player that starts playing automatically when the webpage loads.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Autoplay Audio</title>

</head>

<body>

    <h1>Background Music</h1>

    <audio autoplay controls>

        <source src="background.mp3" type="audio/mpeg">

    </audio>

</body>

</html>

Expected Output

Background Music

(Audio starts automatically if browser settings allow it.)

Explanation

The autoplay attribute tells the browser to begin playing the audio automatically after the page loads.

Note: Most modern browsers block autoplay with sound unless the user has interacted with the page. To improve compatibility, autoplay is often combined with the muted attribute.

Concepts Covered

  • autoplay
  • Automatic Playback
  • HTML5 Multimedia

4. Play Audio in a Loop

Problem Statement

Create an audio player that continuously repeats the audio after it finishes playing.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Loop Audio</title>

</head>

<body>

    <h1>Loop Audio Example</h1>

    <audio controls loop>

        <source src="music.mp3" type="audio/mpeg">

        Your browser does not support HTML5 audio.

    </audio>

</body>

</html>

Expected Output

Loop Audio Example

▶️ Audio keeps playing repeatedly after it ends.

Explanation

The loop attribute restarts the audio automatically after it reaches the end.

Common uses include:

  • Background music
  • Meditation websites
  • Ambient sounds
  • Relaxation music
  • Game soundtracks

Concepts Covered

  • loop
  • Audio Playback
  • HTML5 Audio

5. Create a Muted Audio Player

Problem Statement

Create an audio player that loads in a muted state.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Muted Audio</title>

</head>

<body>

    <h1>Muted Audio Example</h1>

    <audio controls muted>

        <source src="song.mp3" type="audio/mpeg">

    </audio>

</body>

</html>

Expected Output

Muted Audio Example

🔇 Audio starts without sound.

Explanation

The muted attribute loads the media with its volume turned off.

Users can manually unmute the audio using the built-in controls.

It is often combined with:

  • autoplay
  • loop

because many browsers allow muted autoplay.

Concepts Covered

  • muted
  • HTML5 Audio
  • Browser Compatibility

6. Use Multiple Audio Sources

Problem Statement

Create an audio player that supports multiple file formats for better browser compatibility.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Multiple Audio Sources</title>

</head>

<body>

    <h1>Multiple Audio Formats</h1>

    <audio controls>

        <source src="music.mp3" type="audio/mpeg">

        <source src="music.ogg" type="audio/ogg">

        Your browser does not support HTML5 audio.

    </audio>

</body>

</html>

Expected Output

Multiple Audio Formats

▶️ Browser automatically plays the first supported audio format.

Explanation

The <source> element allows you to provide multiple audio formats.

The browser automatically selects the first format it supports.

Common audio formats include:

  • MP3
  • OGG
  • WAV

Using multiple sources improves cross-browser compatibility.

Concepts Covered

  • <source>
  • Multiple Audio Formats
  • HTML5 Multimedia

7. Add a Video to a Webpage

Problem Statement

Create a webpage that displays a video using the HTML5 <video> element.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Video Example</title>

</head>

<body>

    <h1>HTML5 Video Example</h1>

    <video width="600" controls>

        <source src="video.mp4" type="video/mp4">

        Your browser does not support HTML5 video.

    </video>

</body>

</html>

Expected Output

HTML5 Video Example

▶️ Video Player appears with playback controls.

Explanation

The <video> element embeds videos directly into a webpage.

The width attribute controls the displayed width of the video.

The controls attribute provides:

  • Play
  • Pause
  • Timeline
  • Volume
  • Full Screen

Concepts Covered

  • <video>
  • HTML5 Video
  • Video Player

8. Add Video Playback Controls

Problem Statement

Create a video player with built-in playback controls.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Video Controls</title>

</head>

<body>

    <h1>Video Player</h1>

    <video controls width="700">

        <source src="movie.mp4" type="video/mp4">

    </video>

</body>

</html>

Expected Output

Video Player

▶️ Pause ⏸️ Timeline 🔊 Fullscreen

Explanation

The controls attribute displays the browser’s default video controls.

These usually include:

  • Play
  • Pause
  • Progress Bar
  • Volume Control
  • Playback Speed (browser-dependent)
  • Fullscreen Button

Without the controls attribute, users cannot control the video.

Concepts Covered

  • controls
  • Video Playback
  • HTML5 Multimedia

9. Play a Video Automatically

Problem Statement

Create a webpage where a video starts playing automatically when the page loads.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Autoplay Video</title>

</head>

<body>

    <h1>Welcome Video</h1>

    <video
        width="700"
        controls
        autoplay
        muted>

        <source src="welcome.mp4" type="video/mp4">

        Your browser does not support HTML5 video.

    </video>

</body>

</html>

Expected Output

Welcome Video

▶️ The video starts automatically (muted) if the browser allows autoplay.

Explanation

The autoplay attribute tells the browser to begin playing the video automatically.

Modern browsers usually block autoplay with sound, so it is recommended to use:

autoplay muted

This combination improves browser compatibility.

Concepts Covered

  • autoplay
  • muted
  • HTML5 Video

10. Create a Looping Video

Problem Statement

Create a video player that automatically repeats the video after it ends.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Loop Video</title>

</head>

<body>

    <h1>Loop Video Example</h1>

    <video
        width="700"
        controls
        loop>

        <source src="demo.mp4" type="video/mp4">

    </video>

</body>

</html>

Expected Output

Loop Video Example

▶️ The video restarts automatically after finishing.

Explanation

The loop attribute makes the video play continuously.

It is commonly used for:

  • Website banners
  • Product showcases
  • Animated backgrounds
  • Marketing pages
  • Digital signage

Concepts Covered

  • loop
  • HTML5 Multimedia
  • Video Playback

11. Create a Muted Video

Problem Statement

Create a video that loads without sound.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Muted Video</title>

</head>

<body>

    <h1>Muted Video Example</h1>

    <video
        width="700"
        controls
        muted>

        <source src="sample.mp4" type="video/mp4">

    </video>

</body>

</html>

Expected Output

Muted Video Example

🔇 Video starts in muted mode.

Explanation

The muted attribute disables the video’s sound when it loads.

Users can enable audio later using the built-in volume controls.

Muted videos are frequently used with autoplay because most browsers permit muted autoplay.

Concepts Covered

  • muted
  • HTML5 Video
  • Browser Compatibility

12. Display a Poster Image Before the Video Plays

Problem Statement

Create a video player that displays a thumbnail image before playback begins.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Poster Image</title>

</head>

<body>

    <h1>Course Preview</h1>

    <video
        width="700"
        controls
        poster="thumbnail.jpg">

        <source src="course.mp4" type="video/mp4">

    </video>

</body>

</html>

Expected Output

Course Preview

[ Thumbnail Image ]

▶️ Click Play to start the video.

Explanation

The poster attribute specifies an image displayed before the video starts.

Poster images improve the appearance of webpages by giving users a preview instead of a blank video frame.

Typical examples include:

  • YouTube-style thumbnails
  • Course previews
  • Product demonstrations
  • Movie posters

Concepts Covered

  • poster
  • Video Thumbnail
  • HTML5 Video

13. Use Multiple Video Sources

Problem Statement

Create a video player that supports multiple video formats for maximum browser compatibility.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Multiple Video Sources</title>

</head>

<body>

    <h1>HTML5 Video Formats</h1>

    <video
        width="700"
        controls>

        <source src="video.mp4" type="video/mp4">

        <source src="video.webm" type="video/webm">

        <source src="video.ogg" type="video/ogg">

        Your browser does not support HTML5 video.

    </video>

</body>

</html>

Expected Output

HTML5 Video Formats

▶️ The browser automatically selects the first supported video format.

Explanation

The <source> element allows multiple versions of the same video.

The browser checks each source in order and plays the first compatible format.

Common video formats include:

  • MP4 (Most widely supported)
  • WebM
  • OGG

Providing multiple formats ensures your video works across different browsers and operating systems.

Concepts Covered

  • <source>
  • Multiple Video Formats
  • HTML5 Multimedia

14. Embed Audio and Video Together on One Webpage

Problem Statement

Create a webpage that contains:

  • A welcome heading
  • One audio player
  • One video player

Both media elements should have playback controls.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>HTML5 Multimedia Example</title>

</head>

<body>

    <h1>HTML5 Multimedia Demo</h1>

    <h2>Background Music</h2>

    <audio controls>

        <source src="music.mp3" type="audio/mpeg">

        Your browser does not support HTML5 audio.

    </audio>

    <br><br>

    <h2>Course Introduction Video</h2>

    <video
        width="700"
        controls>

        <source src="course.mp4" type="video/mp4">

        Your browser does not support HTML5 video.

    </video>

</body>

</html>

Expected Output

HTML5 Multimedia Demo

Background Music

▶️ Audio Player

Course Introduction Video

▶️ Video Player

Explanation

This example demonstrates how HTML5 supports both audio and video on the same webpage.

Each media element works independently and includes its own playback controls.

This layout is commonly used on:

  • Online learning websites
  • Product landing pages
  • Educational portals
  • Company presentation pages

Concepts Covered

  • <audio>
  • <video>
  • Multimedia Integration
  • HTML5 Media Elements

15. Build a Complete Multimedia Webpage

Problem Statement

Create a multimedia webpage containing:

  • Website title
  • Introduction paragraph
  • Background music
  • Welcome video
  • Footer message

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Complete Multimedia Webpage</title>

</head>

<body>

    <header>

        <h1>VSIT Computer Education</h1>

        <p>Learn HTML5 Multimedia with Practical Examples.</p>

    </header>

    <hr>

    <section>

        <h2>Background Music</h2>

        <audio controls>

            <source src="music.mp3" type="audio/mpeg">

        </audio>

    </section>

    <br>

    <section>

        <h2>Welcome Video</h2>

        <video
            width="700"
            controls
            poster="thumbnail.jpg">

            <source src="welcome.mp4" type="video/mp4">

        </video>

    </section>

    <hr>

    <footer>

        <p>© 2026 VSIT Computer Education. All Rights Reserved.</p>

    </footer>

</body>

</html>

Expected Output

VSIT Computer Education

Learn HTML5 Multimedia with Practical Examples.

------------------------------------

Background Music

▶️ Audio Player

------------------------------------

Welcome Video

[ Thumbnail ]

▶️ Video Player

------------------------------------

© 2026 VSIT Computer Education.

Explanation

This project combines multiple HTML5 multimedia elements into a complete webpage.

It demonstrates:

  • Audio integration
  • Video integration
  • Poster image
  • Page structure
  • Multimedia organization

This layout is commonly found on:

  • Online course websites
  • Business landing pages
  • Product demonstrations
  • Portfolio websites

Concepts Covered

  • HTML5 Multimedia
  • Audio
  • Video
  • Poster Images
  • Complete Multimedia Page

Coding Challenge

Create a Training Institute Homepage that includes:

  • Website Logo
  • Institute Name
  • Course Introduction
  • Background Music
  • Promotional Video
  • Poster Image
  • Contact Information
  • Footer

Use:

  • <audio>
  • <video>
  • <source>
  • controls
  • poster
  • autoplay
  • muted
  • loop

Try creating the entire webpage yourself before looking back at previous examples.

Chapter Summary

In this chapter, you learned how to use HTML5 multimedia elements to add audio and video directly to webpages without relying on third-party plugins.

Before HTML5, multimedia content often required technologies like Adobe Flash. HTML5 introduced the <audio> and <video> elements, making multimedia integration simpler, faster, more secure, and fully supported by modern browsers.

Throughout this chapter, you practiced creating:

  • Audio Player
  • Audio Controls
  • Autoplay Audio
  • Loop Audio
  • Muted Audio
  • Multiple Audio Sources
  • Video Player
  • Video Controls
  • Autoplay Video
  • Loop Video
  • Muted Video
  • Poster Image
  • Multiple Video Sources
  • Audio and Video on the Same Page
  • Complete Multimedia Webpage

These multimedia features are commonly used in:

  • Online learning platforms
  • Music streaming websites
  • Video streaming platforms
  • Educational portals
  • Company websites
  • Product demonstrations
  • News websites
  • Personal portfolios

Learning HTML5 multimedia helps you create engaging, interactive, and modern websites.

Key Takeaways

  • <audio> embeds audio files into webpages.
  • <video> embeds videos into webpages.
  • <source> provides multiple media formats for browser compatibility.
  • controls displays playback controls.
  • autoplay starts media automatically (subject to browser policies).
  • loop repeats media continuously.
  • muted starts media without sound.
  • poster displays an image before a video starts.
  • Multiple media sources improve cross-browser compatibility.
  • HTML5 multimedia does not require external plugins.

Frequently Asked Questions (FAQs)

1. What is HTML5 Multimedia?

HTML5 multimedia allows developers to embed audio and video directly into webpages using built-in HTML elements.

Example:

<audio controls>

<video controls>

2. Which HTML tag is used to add audio?

Use the <audio> element.

Example:

<audio controls>

    <source src="music.mp3">

</audio>

3. Which HTML tag is used to display videos?

Use the <video> element.

Example:

<video controls>

    <source src="movie.mp4">

</video>

4. What is the purpose of the controls attribute?

The controls attribute displays the browser’s built-in media controls.

These controls usually include:

  • Play
  • Pause
  • Timeline
  • Volume
  • Fullscreen (video)

Example:

<video controls>

5. Why should multiple <source> elements be used?

Different browsers support different media formats.

Example:

<video controls>

    <source src="video.mp4" type="video/mp4">

    <source src="video.webm" type="video/webm">

</video>

The browser automatically selects the first supported format.

6. What is the purpose of the poster attribute?

The poster attribute displays an image before the video starts playing.

Example:

<video poster="thumbnail.jpg">

It improves the appearance of webpages by showing a preview image.

7. Why is muted often used with autoplay?

Most modern browsers block autoplay with sound.

Using:

autoplay muted

allows videos to start automatically in many browsers.

8. What are the advantages of HTML5 Multimedia?

HTML5 multimedia:

  • Eliminates the need for plugins.
  • Works across modern browsers.
  • Improves user engagement.
  • Supports mobile devices.
  • Provides built-in playback controls.
  • Improves website performance and security.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top