HTML5 Essentials (Module 6)

3 min readFeb 20, 2024

Multimedia Integration

6.1 Embedding videos and audios

HTML5 allows you to embed videos and audios directly into your web pages.
Use the <video> element to embed videos and the <audio> element to embed audio files.
Specify the source of the video or audio using the <source> element within the video or audio tags.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 Multimedia</title>
</head>
<body>
    <h1>Video Example</h1>
    <video controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    
    <h1>Audio Example</h1>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        Your browser does not support the audio tag.
    </audio>
</body>
</html>

Practice:

Embed a video and an audio file into your web page using the<video>and<audio>elements.

6.2 Using the video and audio elements

The <video> and <audio> elements provide various attributes and methods to control playback and appearance.
Use the controls attribute to display default playback controls like play, pause, and volume control.
Specify additional attributes like autoplay, loop, and muted to control playback behavior.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 Multimedia</title>
</head>
<body>
    <h1>Video Example</h1>
    <video controls autoplay loop muted>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    
    <h1>Audio Example</h1>
    <audio controls autoplay loop muted>
        <source src="audio.mp3" type="audio/mpeg">
        Your browser does not support the audio tag.
    </audio>
</body>
</html>

Practice:

Experiment with different attributes of the<video>and<audio>elements to control playback behavior.

6.3 Configuring video and audio playback

HTML5 provides additional attributes and methods to configure video and audio playback.
Use the preload attribute to specify how the media should be loaded.
Utilize JavaScript and the media element’s methods and events for programmatic control over playback.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 Multimedia</title>
</head>
<body>
    <h1>Video Example</h1>
    <video controls preload="metadata">
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    
    <h1>Audio Example</h1>
    <audio controls preload="auto">
        <source src="audio.mp3" type="audio/mpeg">
        Your browser does not support the audio tag.
    </audio>
    
    <script>
        const video = document.querySelector('video');
        const audio = document.querySelector('audio');
        
        video.addEventListener('play', () => {
            console.log('Video started playing');
        });
        
        audio.addEventListener('ended', () => {
            console.log('Audio playback ended');
        });
    </script>
</body>
</html>

Practice:

Experiment with different preload values and add event listeners to the video and audio elements to control and respond to playback events.

6.4 Adding subtitles and captions to multimedia

HTML5 provides support for subtitles and captions in videos.
Use the <track> element within the <video> element to add subtitles or captions.
Specify the src, srclang, and label attributes to define the source, language, and label of the track.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 Multimedia</title>
</head>
<body>
    <h1>Video Example</h1>
    <video controls>
        <source src="video.mp4" type="video/mp4">
        <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles.fr.vtt" kind="subtitles" srclang="fr" label="French">
        Your browser does not support the video tag.
    </video>
</body>
</html>

Practice:

Add subtitles or captions to your video using the <track> element and multiple subtitle files for different languages.

6.5 Working with HTML5 multimedia APIs

HTML5 provides JavaScript APIs to interact with multimedia elements programmatically.
UseJavaScript to access and manipulate video and audio elements using the HTML5 media APIs.
Some commonly used APIs include play(), pause(), currentTime, volume, duration, and ended.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 Multimedia</title>
</head>
<body>
    <h1>Video Example</h1>
    <video id="myVideo" controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    
    <button onclick="playVideo()">Play</button>
    <button onclick="pauseVideo()">Pause</button>
    <input type="range" min="0" max="1" step="0.1" onchange="changeVolume(this.value)">
    <span id="currentTime"></span>
    
    <script>
        const video = document.getElementById('myVideo');
        const currentTimeSpan = document.getElementById('currentTime');
        
        function playVideo() {
            video.play();
        }
        
        function pauseVideo() {
            video.pause();
        }
        
        function changeVolume(value) {
            video.volume = value;
        }
        
        video.addEventListener('timeupdate', () => {
            currentTimeSpan.textContent = `Current Time: ${video.currentTime.toFixed(2)}s`;
        });
    </script>
</body>
</html>

Practice:

Use the HTML5 media APIs to add custom controls and functionality to your video or audio player, such as seeking, changing playback speed, or displaying current time.

HTML5 Essentials (Module 6)

6.1 Embedding videos and audios

Practice:

6.2 Using the video and audio elements

Practice:

6.3 Configuring video and audio playback

Practice:

6.4 Adding subtitles and captions to multimedia

Practice:

6.5 Working with HTML5 multimedia APIs

Practice:

Written by MONI