video标签如何计算累计播放有效时长,要很精确的那种,用代码实例
时间: 2023-10-25 13:14:37 浏览: 159
获取视频播放时长
要计算video标签的累计播放有效时长,可以通过以下步骤:
1. 在视频加载时记录开始时间,可以使用Date对象获取当前时间戳。
2. 每隔一段时间(例如1秒),记录当前时间戳和开始时间戳之差,得到当前播放时长。
3. 如果视频处于暂停状态,则暂停计时,记录暂停时间戳。
4. 当视频继续播放时,重新开始计时,此时需要减去暂停时长。
5. 当视频结束时,记录结束时间戳,并计算总播放时长。
以下是一个示例代码,每秒钟更新一次播放时长,精确到毫秒级别:
```javascript
var video = document.getElementById('myVideo'); // 获取video元素
var startTime = 0; // 开始时间戳
var pauseTime = 0; // 暂停时间戳
var totalTime = 0; // 总播放时长
video.addEventListener('play', function() {
startTime = new Date().getTime(); // 记录开始时间
});
video.addEventListener('timeupdate', function() {
if (!video.paused) { // 视频未暂停
var currentTime = new Date().getTime(); // 当前时间戳
var playTime = currentTime - startTime - pauseTime; // 当前播放时长
totalTime += playTime; // 累计播放时长
startTime = currentTime; // 更新开始时间戳
document.getElementById('playTime').innerHTML = totalTime; // 显示播放时长
}
});
video.addEventListener('pause', function() {
pauseTime += new Date().getTime() - startTime; // 记录暂停时间戳
});
video.addEventListener('ended', function() {
var endTime = new Date().getTime(); // 结束时间戳
var playTime = endTime - startTime - pauseTime; // 最后一段播放时长
totalTime += playTime; // 累计播放时长
document.getElementById('totalTime').innerHTML = totalTime; // 显示总播放时长
});
```
在上面的代码中,我们在video元素上监听了play、timeupdate、pause和ended事件,分别对应视频播放开始、播放进度更新、暂停和播放结束。在play事件中记录开始时间戳,在timeupdate事件中计算当前播放时长并累加到总播放时长中,在pause事件中记录暂停时间戳,在ended事件中计算最后一段播放时长并累加到总播放时长中。最后,我们将播放时长和总播放时长显示在页面上,可以根据实际需求进行修改。
阅读全文