Vue：监听视频播放时长

---

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" controls preload autoplay="autoplay" style="width: 100%" @canplay="getVideoDur"><source :src="videoUrl" type="video/mp4"></video></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);})},/*** 关闭弹框*/handleClose() {this.videoUrl = nullthis.visible = false},}
}
</script>
<style>
.videoBox .el-dialog__header {background-color: #000000;
}.videoBox .el-dialog__header .el-dialog__title {color: #fff;
}.videoBox .el-dialog__body {padding: 0 !important;background-color: #000000;
}
</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);
})