Vue：Video标签进阶使用（监听视频播放时长）

---

函数	含义
controls	如果存在该属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量、拖动进度、暂停或恢复播放。
autoplay	自动播放
controlsList	noplaybackrate：禁用播放速度 nodownload：禁用下载
disablePictureInPicture	禁用画中画

1、源码

<template>
  <el-dialog class="videoBox" :title="title" :visible.sync="visible" width="40%" :before-close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false">
    <video id="video" class="zxxx_right_video" controls preload autoplay="autoplay" controlsList="noplaybackrate nodownload" disablePictureInPicture @canplay="getVideoDur" @contextmenu="contextmenu">
      <source :src="videoUrl" type="video/mp4">
    </video>
    <div class="cover"></div>
  </el-dialog>
</template>
<script>
export default {
  name: 'VideoPlayBack',
  data() {
    return {
      // 标题
      title: null,
      // 是否显示弹框
      visible: false,
      // 视频地址
      videoUrl: null
    }
  },
  methods: {
    /**
     * 初始化视频
     */
    initVideo() {
      this.$nextTick(() => {
        let myVideo = document.getElementById('video')
        myVideo.pause()
        myVideo.load()
      });
    },
    /**
     * 监听视频
     */
    getVideoDur() {
      //监听播放时间
      var video = document.getElementById("video");
      // //使用事件监听方式捕捉事件
      // video.addEventListener("timeupdate", function () {
      //     var timeDisplay = Math.floor(video.currentTime);
      //     var duration = Math.floor(video.duration);
      //     console.log("总时长", duration);
      //     console.log("当前播放的时长", timeDisplay);
      //   }, false);
      // 监听视频播放
      // video.addEventListener("play", function () {
      //   var duration = Math.floor(video.duration);
      //   console.log("总时长", duration);
      //   var timeDisplay = Math.floor(video.currentTime);
      //   console.log("视频开始时长", timeDisplay);
      // })
      // 监听视频暂停
      video.addEventListener("pause", function () {
        var duration = Math.floor(video.duration);
        console.log("总时长", duration);
        var timeDisplay = Math.floor(video.currentTime);
        console.log("视频结束时长", timeDisplay);
      })
    },
    /**
     * 禁用视频右键
     * @param e
     */
    contextmenu(e) {
      e.returnValue = false
    }
    /**
     * 关闭弹框
     */
    handleClose() {
      this.videoUrl = null
      this.visible = false
    },
  }
}
</script>
<style>
<!-- 禁用视频全屏 -->
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
</style>

2、监听视频实时时长

video.addEventListener("timeupdate", function () {
  var timeDisplay = Math.floor(video.currentTime);
  var duration = Math.floor(video.duration);
  console.log("总时长", duration);
  console.log("当前播放的时长", timeDisplay);
}, false);

3、监听视频播放时长

video.addEventListener("play", function () {
  var duration = Math.floor(video.duration);
  console.log("总时长", duration);
  var timeDisplay = Math.floor(video.currentTime);
  console.log("视频开始时长", timeDisplay);
})

4、监听视频暂停时长

video.addEventListener("pause", function () {
  var duration = Math.floor(video.duration);
  console.log("总时长", duration);
  var timeDisplay = Math.floor(video.currentTime);
  console.log("视频结束时长", timeDisplay);
})