5.1 额外属性
HTML5 的多媒体元素，例如 <audio> 和 <video>，提供了许多属性用于管理多媒体内容的播放。了解这些属性可以创建更具互动性和便利性的网站，可以适应用户的不同需求。现在我们详细看看 <audio> 和 <video> 元素可用的额外属性。
crossorigin 属性
crossorigin 属性指定浏览器应如何处理来自其他域的多媒体文件请求。这个属性可以有两个值：
anonymous：请求不包含凭据（cookies、授权头等）use-credentials：请求包含凭据
示例:
HTML
<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>
<source> 的属性
<source> 标签用在 <audio> 和 <video> 元素中，用于指定多媒体内容的多个来源。这有助于确保跨浏览器兼容性，因为不同的浏览器可能支持不同的格式。
示例:
HTML
<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>
字幕和文本轨道的属性
HTML5 提供了通过 <track> 标签添加字幕、文本轨道和描述的功能。此元素支持几种类型的文本轨道，如字幕、描述和章节。
示例:
HTML
<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 使用 JavaScript 管理多媒体元素
<audio> 和 <video> 元素提供了一个 API，用于通过 JavaScript 管理播放。这让我们可以创建自定义控制元素和实现复杂的播放场景。
示例:
HTML
<video id="myVideo" src="videofile.mp4" controls></video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="stopVideo()">Stop</button>
JavaScript
const video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function stopVideo() {
video.pause();
video.currentTime = 0;
}
在这个例子中，按钮允许通过 JavaScript 播放、暂停和停止视频。
5.3 多媒体元素的事件
<audio> 和 <video> 元素支持许多事件，允许追踪和响应播放状态的变化。
主要事件：
play：当开始播放时触发pause：当播放暂停时触发ended：当播放结束时触发timeupdate：当播放时间更新时定期触发
事件使用示例:
HTML
<video id="myVideo" src="videofile.mp4" controls></video>
JavaScript
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);
});
这个代码演示了如何追踪多媒体元素的主要事件。
GO TO FULL VERSION