微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

HTML5 视频:需要使用 javascript 查找从“播放”到“暂停”的观看时间

如何解决HTML5 视频:需要使用 javascript 查找从“播放”到“暂停”的观看时间

我需要找到从用户点击“播放”到点击“暂停”的 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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。