HTML DOM Video 对象
HTML DOM Video 对象
HTML DOM Video 对象提供了对 HTML 视频元素的控制和访问。开发人员可以使用 Video 对象来为网站创建交互式视频体验。
创建 Video 对象
可以在 HTML 中使用 <video>
标签来创建一个 Video 对象,也可以使用 JavaScript 动态地创建一个 Video 对象。
示例代码:
<video id="myVideo" width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
var video = document.createElement("video");
video.src = "video.mp4";
video.controls = true;
video.width = 320;
video.height = 240;
document.body.appendChild(video);
创建 Video 对象需要指定视频源(src)和视频类型(type),视频类型可以是 MP4、WebM 或 Ogg 等格式。如果指定了多个源,浏览器会自动选择最适合当前环境的源。
可选的 HTML <video>
属性:
- src:视频的 URL。
- poster:视频未播放时显示的图像的 URL。
- preload:页面加载时是否预加载视频,取值可以是 “none”、“metadata” 或 “auto”。
- autoplay:是否自动播放视频,取值可以是 true 或 false。
- loop:是否循环播放视频,取值可以是 true 或 false。
- muted:是否静音播放视频,取值可以是 true 或 false。
- controls:是否显示控制条,取值可以是 true 或 false。
控制 Video 对象
使用 JavaScript 可以控制 Video 对象的各种行为和属性,例如播放、暂停、跳转等。
示例代码:
var video = document.getElementById("myVideo");
video.play(); // 播放视频
video.pause(); // 暂停视频
video.currentTime = 10; // 跳转到视频的第 10 秒
常用的视频属性和方法:
- duration:视频的总时长。
- currentTime:当前播放位置的时间。
- paused:判断视频是否暂停。
- muted:判断视频是否静音。
- volume:设置/获取视频的音量。
- play():播放视频。
- pause():暂停视频。
- load():重新加载视频。
监听 Video 对象事件
Video 对象可以触发各种事件,例如播放、暂停等。可以使用 JavaScript 监听这些事件,以便在事件触发时执行特定的操作。
示例代码:
var video = document.getElementById("myVideo");
video.addEventListener("play", function() {
console.log("视频已经开始播放!");
});
video.addEventListener("pause", function() {
console.log("视频已经暂停!");
});
video.addEventListener("ended", function() {
console.log("视频已经播放完毕!");
});
常用的视频事件:
- loadstart:视频开始加载。
- loadedmetadata:视频元数据已加载。
- play:视频开始播放。
- pause:视频暂停播放。
- ended:视频播放结束。
- error:视频加载出错。
结论
HTML DOM Video 对象提供了控制 HTML 视频元素的方法和事件,可以为网站创建交互式视频体验。开发人员可以使用 Video 对象的属性和方法,例如 play、pause、currentTime 等,对视频进行控制,并监听 Video 对象的事件,例如 play、pause、ended 等,以便在事件触发时执行特定的操作。