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 等，以便在事件触发时执行特定的操作。

HTML DOM Track 对象 HTML DOM 事件