Vue 监听视频播放时长的实例代码
作者：Monly21
本文介绍了如何通过源码实现对视频实时时长、播放时长和暂停时长的监听,详细阐述了相关技术的应用方法,帮助开发者更好地掌握视频监控技术,提高用户体验
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 = null
this.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);
})到此这篇关于Vue 监听视频播放时长的实例代码的文章就介绍到这了,更多相关vue播放时长内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！