Video标签的事件列表
cloud.tencent.com/developer/a…
vue2实时监测video视频播放时长和总时长
vue3实时监测video视频播放时长和总时长
(转载 blog.csdn.net/qq_40133610…)
<template>
<div class="video">
<video ref="video_item" id="video_item" :poster="videoposter" :src="videosrc" controls disablePictureInPicture="true" controlslist="nodownload noremoteplayback"></video>
</div>
</template>
<script setup lang="ts">
import { ref, nextTick } from "vue"
let totalduration: number = 0; //总时长
let duration: number = 0; //播放时长
let videoposter = ref<string>('');
let videosrc = ref<string>('');
let isvideocanplay = ref<boolean>(false);
const video_item = ref<any>(null);
//通过获取视频封面以及视频
videoposter.value = res.data.thumbnailImgUrl;
videosrc.value = res.data.turnUrl;
nextTick(() => {
handlevideo();
});
// 操作视频dom元素
const handlevideo = () => {
// 获取播放时长
video_item.value.addEventListener('loadedmetadata', function () {
totalduration = Number(video_item.value.duration);
console.log(totalduration);
});
// 初始化视频时长
video_item.value.addEventListener('canplay', () => {
if (!isvideocanplay.value) {
if (localStorage.getItem('video_' + id)) {
duration = Number(localStorage.getItem('video_' + id));
} else {
duration = 0;
}
// 如果设置初始视频为0，会导致视频封面消失
if (duration > 0) {
if (video_item.value.currentTime != duration) {
if (video_item.value.currentTime < duration) {
video_item.value.currentTime = duration;
}
}
}
isvideocanplay.value = true;
}
})
// 监听视频播放速率发生变化,发生变化后改回初始速度
video_item.value.addEventListener('ratechange', () => {
video_item.value.playbackRate = 1;
})
// 监听视频开始播放
video_item.value.addEventListener('play', () => {
console.log('开始播放');
if (video_item.value.currentTime - duration > 1) {
video_item.value.currentTime = duration;
}
})
// 监听视频暂停播放
video_item.value.addEventListener('pause', () => {
console.log('暂停播放');
})
// 监听视频播放时间改变
video_item.value.addEventListener('timeupdate', () => {
// 如果设置得播放时间大于播放进度，禁止改变
if (video_item.value.currentTime - duration > 1) {
video_item.value.currentTime = duration;
} else {
duration = Number(video_item.value.currentTime);
}
})
// 监听视频播放结束
video_item.value.addEventListener('ended', () => {
cleartimer();
adddeposit();
console.log('播放结束');
})
}
</script>
<style scoped lang="less">
.video {
padding: 10px 15px;
video {
width: 100%;
height: inherit;
}
video::-webkit-media-controls-timeline {
display: none;
}
}
</style>
