问题描述
我需要找到从用户点击“播放”到点击“暂停”的 HTML 视频的观看时间;目前我只找到了 currentTime 和这样的代码,但这不是我需要的:
$("video").on('timeupdate',function(){
console.log(this.currentTime);
});
解决方法
- 在视频
"play"
上将Date.now()
ms 值存储到元素data-start
属性中 - 在视频
"pause"
上计算Date.now()
和data-start
的差异 - 将累积的 ms 结果存储到
data-viewtime
属性中,以供以后参考和添加。
const EL_video = document.querySelector("#vid");
EL_video.addEventListener("play",() => {
EL_video.dataset.start = Date.now();
});
EL_video.addEventListener("pause",() => {
const diff = Date.now() - EL_video.dataset.start;
EL_video.dataset.viewtime = (+EL_video.dataset.viewtime || 0) + diff;
console.log(`Total view time: ${EL_video.dataset.viewtime} ms`);
});
video {max-height: 150px;}
<video id="vid" src="https://raw.githubusercontent.com/Ahmetaksungur/aksvideoplayer/main/videos/video-360.mp4" controls></video>