如何通过js获取视频(video标签里的视频)的播放进度呢?
时间: 2024-03-05 12:54:32 浏览: 193
jwplayer插件播放进度获取
可以通过 JavaScript 中的 HTML5 Video API 来获取视频播放进度。具体方法如下:
1. 获取 video 元素
首先,你需要获取 video 元素。可以通过以下代码来获取:
```javascript
var videoElement = document.getElementById('myVideo');
```
这里的 `myVideo` 是 video 元素的 id,你需要将其替换为你实际使用的 id。
2. 获取当前播放时间和视频总时长
接下来,你可以使用 video 元素提供的 `currentTime` 和 `duration` 属性来获取当前播放时间和视频总时长。代码如下:
```javascript
var currentTime = videoElement.currentTime;
var duration = videoElement.duration;
```
其中,`currentTime` 表示当前播放时间(单位为秒),`duration` 表示视频总时长(单位为秒)。
3. 获取播放进度百分比
最后,你可以通过计算当前播放时间和视频总时长的比例来获取播放进度百分比。代码如下:
```javascript
var progress = (currentTime / duration) * 100;
```
这里的 `progress` 就是播放进度百分比,值为 0 到 100 之间的数值。
完整的代码如下:
```javascript
var videoElement = document.getElementById('myVideo');
var currentTime = videoElement.currentTime;
var duration = videoElement.duration;
var progress = (currentTime / duration) * 100;
console.log('当前播放时间:' + currentTime + '秒');
console.log('视频总时长:' + duration + '秒');
console.log('播放进度:' + progress + '%');
```
需要注意的是,以上代码需要在视频播放期间才能正确获取播放进度。如果视频未开始播放或已停止播放,`currentTime` 和 `duration` 的值可能不准确。
阅读全文