📌  相关文章
📜  HTML | DOM 视频对象(1)

📅  最后修改于: 2023-12-03 15:15:37.239000             🧑  作者: Mango

HTML | DOM 视频对象

在 HTML 中，我们可以通过使用视频对象来显示视频内容。视频对象是 HTML DOM 中的一部分，它允许我们控制视频的播放、暂停、音量等属性。

创建视频对象

我们可以使用“

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

在上面的代码中，我们创建了一个 ID 为“myVideo”的视频对象，设置了宽高为 320x240，加入了两个源文件“movie.mp4”和“movie.ogg”，同时添加了“controls”属性，这将显示视频控件（播放、暂停、音量等）。

方法和属性

视频对象拥有一些常用的方法和属性来控制视频的播放，这里我们列出几个比较重要的：

属性
  • currentTime：获取或设置当前播放的位置
  • duration：获取视频的长度
  • ended：视频是否播放完毕
  • paused：当前视频是否处于暂停状态
  • volume：获取或设置视频的音量
方法
  • play()：开始播放视频
  • pause()：暂停视频的播放

我们可以通过以下方式来访问这些属性以及方法：

var myVideo = document.getElementById("myVideo");
console.log(myVideo.currentTime); // 获取当前播放位置
console.log(myVideo.duration); // 获取视频长度
console.log(myVideo.paused); // 获取当前是否暂停
myVideo.play(); // 播放视频
myVideo.pause(); // 暂停视频
事件

视频对象还有一些事件，我们可以监听这些事件来实现视频播放的控制和交互。常见的视频事件有：

  • oncanplay：视频可以播放时触发
  • onplay：视频开始播放时触发
  • onpause：视频暂停时触发
  • onended：视频播放结束时触发
  • onerror：视频加载错误时触发

我们可以通过以下方式来监听这些事件：

var myVideo = document.getElementById("myVideo");
myVideo.oncanplay = function() {
  console.log("视频可以播放啦！");
}
myVideo.onplay = function() {
  console.log("视频开始播放！");
}
myVideo.onpause = function() {
  console.log("视频已暂停！");
}
myVideo.onended = function() {
  console.log("视频播放结束！");
}
myVideo.onerror = function() {
  alert("视频加载错误！");
}
参考资料