vue实时监测video视屏播放时长和总时长

1.html代码

 

      //medioUrl视频地址
  

2.js代码

//监听播放时间
    var video = document.getElementById("video");
    //使用事件监听方式捕捉事件
    video.addEventListener(
      "timeupdate",
      function () {
        var timeDisplay;
        var duration;
        //用秒数来显示当前播放进度
        timeDisplay = Math.floor(video.currentTime);
        duration = Math.floor(video.duration);
        console.log("总时长", duration);
        console.log("当前播放的时长", timeDisplay);
      },
      false
    );

3.监听video播放状态

video.addEventListener("play", function () {
       //监听  视频播放
})

video.addEventListener("pause", function () {
       //监听  视频暂停
})