5.1 Additional Attributes
HTML5 multimedia elements like <audio> and <video> offer tons of attributes
for managing multimedia playback. Knowing these attributes helps make your web pages more interactive and user-friendly,
adapting to different user needs. Let's dive into the extra attributes available for <audio> and <video>.
The crossorigin Attribute
The crossorigin attribute tells the browser how to handle requests to multimedia files that are
hosted on different domains. It can have two values:
anonymous: the request is made without any credentials (cookies, authorization headers, etc.)use-credentials: the request includes credentials
Example:
<audio src="https://example.com/audiofile.mp3" controls crossorigin="anonymous"></audio>
<video src="https://example.com/videofile.mp4" controls crossorigin="use-credentials" width="800" height="450"></video>
The <source> Attributes
The <source> tags are used within <audio> and <video> elements to
specify multiple sources of the multimedia content. This ensures cross-browser compatibility since different browsers
support various formats.
Example:
<video controls width="600">
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.webm" type="video/webm">
<source src="videofile.ogv" type="video/ogg">
Your browser does not support the video element.
</video>
Attributes and Properties for Subtitles and Text Tracks
HTML5 provides a way to add subtitles, text tracks, and descriptions using the <track> tag.
This element supports various types of text tracks like subtitles, descriptions, and chapters.
Example:
<video controls width="600">
<source src="videofile.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
Your browser does not support the video element.
</video>
5.2 Controlling Multimedia Elements with JavaScript
The <audio> and <video> elements provide an API for managing playback using JavaScript.
This allows you to create custom controls and implement complex playback scenarios.
Example:
<video id="myVideo" src="videofile.mp4" controls></video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="stopVideo()">Stop</button>
const video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function stopVideo() {
video.pause();
video.currentTime = 0;
}
In this example, the buttons allow you to play, pause, and stop the video using JavaScript.
5.3 Multimedia Element Events
The <audio> and <video> elements support a variety of events that let you
monitor and react to changes in the playback state.
Main events:
play: occurs when playback startspause: occurs when playback is pausedended: occurs when playback reaches the endtimeupdate: occurs periodically as the current playback time changes
Example of using events:
<video id="myVideo" src="videofile.mp4" controls></video>
const video = document.getElementById("myVideo");
video.addEventListener('play', function() {
console.log('Video started playing');
});
video.addEventListener('pause', function() {
console.log('Video paused');
});
video.addEventListener('ended', function() {
console.log('Video ended');
});
video.addEventListener('timeupdate', function() {
console.log('Current time: ' + video.currentTime);
});
This code shows you how to keep track of the main events of a multimedia element.
GO TO FULL VERSION