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

1.html代码

 <div class="top_vdio">
      <video id="video" :src="medioUrl" controls="controls"></video>//medioUrl视频地址
  </div>

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 () {
       //监听  视频暂停
})