Vue3项目引入Vue3VideoPlay播放器（限制倍速进度条拖拽）

常规使用

如果只是进行正常播放，不考虑添加限制条件，建议按照官网直接进行操作

官网地址：Vue3VideoPlay

改进使用

此方案适用于限制倍速、进度条拖拽、状态管理等

引入插件源代码

此操作是方便后续对于功能的拓展性，也为了公司后续项目的直接使用

创建组件

新建一个vue文件，将下载的源码进行引入 

<template>
    <VideoPlay></VideoPlay>
</template>

<script setup>
import VideoPlay from '@/components/byVideoPlay/index.vue';
</script>

限制倍速

<template>
    <VideoPlay ref="videoPlay" :src="playSrc?.videoUrl" @timeupdate="handleTimeUpdate"></VideoPlay>
</template>

<script setup>
import VideoPlay from '@/components/byVideoPlay/index.vue';
const props = defineProps({
    playSrc: {
        type: Object,
        default: {} // 视频信息源数据
    },
});
const videoPlay = ref('');
const atPlayTime = ref(0); // 当前播放时间
const handleTimeUpdate = (env) => {
    let isNum = parseInt(env.target.currentTime);
    if (isNum > atPlayTime.value + 1) {
        if (isSowTime.value < isNum) {
            console.log('倍速');
            videoPlay.value.changeTime(atPlayTime.value); // 回溯至倍速前的视频时间（此方法将在源码中创建）
            videoPlay.value.pause(); // 暂停
        }
    } else if (isSowTime.value < parseInt(env.target.currentTime)) {
        isSowTime.value = parseInt(env.target.currentTime);
    }
    atPlayTime.value = parseInt(env.target.currentTime);
}
</script>

脱离标签页暂停

onMounted(() => {
// 脱离当前播放标签页后暂停视频播放
    document.addEventListener('visibilitychange', function () {
        if (document.visibilityState === 'hidden') {
            videoPlay.value.pause();
        }
    });
});

 读取上次播放时间

<script setup>
watch(
    () => props.playSrc.videoUrl,
    () => {
        nextTick(() => {
            videoPlay.value.changeTime(props.playSrc?.watchTime); // 回溯至倍速前的视频时间（此方法将在源码中创建）
        });
    }
);
onMounted(() => {
    videoPlay.value.changeTime(props.playSrc?.watchTime); // 回溯至倍速前的视频时间（此方法将在源码中创建）
});
</script>

打卡验证 、播放记录

<script setup>
const handleTimeUpdate = (env) => {
// clock为数组结构 -- [10,55,30]
    if (props.playSrc.clock?.includes(parseInt(env.target.currentTime))) {
        if (isPunch.value) {
            videoPlay.value.pause(); // 暂停
            videoPlay.value.custToggleFullScreenHandle(); //退出全屏
            // -----------------------------------------------------
            // 下方写打卡逻辑...
            videoPlay.value.play(); //播放
        }
    }
    putCoursesTime(parseInt(env.target.currentTime));
}
// 记录学习时长时间（每30秒调取接口记录播放时间）
const putCoursesTime = (time) => {
    if (time != 0 && time % 30 == 0) {
        console.log('记录学习时长');
        saveCoursesTime({ time })
};
</script>