用js控制视频播放进度

qq_42214739

于 2024-09-03 16:39:52 发布

阅读量1.2k

点赞数 4

文章标签： javascript 音视频开发语言

本文链接：https://blog.csdn.net/qq_42214739/article/details/141865599

版权

在JavaScript中控制视频播放进度，你可以使用HTML5的标签，并通过操作其currentTime属性来实现。currentTime属性表示视频或音频的当前播放时间（以秒为单位）。你可以设置这个属性来跳转到视频的特定时间点，或者通过增加或减少其值来快进或快退视频。

下面是一个基本的例子，展示了如何使用JavaScript来控制视频播放的进度：

HTML部分:

<video id="myVideo" width="320" height="240" controls>  
  <source src="movie.mp4" type="video/mp4">  
  Your browser does not support the video tag.  
</video>  
<button onclick="jumpToFiveSeconds()">跳转到5秒</button>  
<button onclick="jumpToTenSeconds()">跳转到10秒</button>

JavaScript部分:

function jumpToFiveSeconds() {  
  var video = document.getElementById("myVideo");  
  if (video.readyState >= 2) { // 确保视频已经加载  
    video.currentTime = 5; // 跳转到5秒  
  }  
}  
  
function jumpToTenSeconds() {  
  var video = document.getElementById("myVideo");  
  if (video.readyState >= 2) { // 确保视频已经加载  
    video.currentTime = 10; // 跳转到10秒  
  }  
}

在这个例子中，我们有两个按钮，分别用于将视频播放进度跳转到5秒和10秒。通过document.getElementById获取元素，然后设置其currentTime属性为想要跳转的时间点（以秒为单位）。

注意：

在尝试设置currentTime之前，我们检查video.readyState以确保视频元数据已经加载（readyState >= 2）。这是为了确保视频可以被成功寻址到指定时间点。
readyState属性表示媒体元素的当前状态。readyState的值范围从0到4，其中2代表“元数据已加载”，即足够的数据来显示媒体时长等信息，但不一定足以开始播放。
controls属性在标签中是为了给用户一个默认的播放控件，包括播放/暂停按钮、音量控制等。这不是必须的，但在这个例子中，它有助于你直观地看到视频的状态变化。
此外，你还可以通过监听事件（如timeupdate）来动态跟踪视频的播放进度，或者使用play(), pause(), seeking, seeked等方法来控制视频的播放行为。