需求
- 自定义截屏按钮
- 点击按钮截屏，获取图片地址，并预览图片
- 获取当前截屏的时间
- 拖动进度条时，实时截屏（需防抖）
最终效果图展示
- 截屏并预览图片+展示当前截屏时间
1. 防抖
src/utils/tuils.js
// 防抖函数| f 要执行的函数 | deley 延时（毫秒）,默认100 | firstRun 第一次是否执行 true就是执行，默认false, // // // // // // // // // // // // //
function debounce(f, deley = 100, firstRun = false) {
let time666
// 第一次是否执行
if (firstRun === true) f();
return (_, ...arg) => {
clearTimeout(time666)
time666 = setTimeout(__ => f.call(_, arg), deley)
}
};
export {
debounce
}
2. 导入防抖+截屏按钮+基础配置（子级）
思路
- 开启截屏控件
- 调用截屏方法
- 重点在代码
src/components/PlayerVideo.vue
<template>
<!-- 1. 播放器占位，注意id -->
<div id="player"></div>
</template>
<script setup>
// 引入相关
import {
onMounted, reactive } from 'vue';
import Player from 'xgplayer/dist/simple_player';
import screenShot from 'xgplayer/dist/controls/screenShot';//截屏
// 2. 导入防抖功能
import {
debounce } from '@/utils/utils';
// 3. 定义一个emit | setVideoCurTimeAndSceShop - 视频进度条改变触发，更新时间与截屏
const emit = defineEmits(['setVideoCurTimeAndSceShop']);
// 4. 配置
const playerOpts = {
hideScroll: true,//是否隐藏截屏按钮 - 自定义 （* 重点），如尾部css
id: 'player',//元素id
url: '/public/video/4.mp4',//视频地址
//截图配置///
// 值 - 默认false，不启用截屏 || 对象{}
// 配置类型1 //
// screenShot:false,
// 配置类型2 //
screenShot: {
saveImg: false,//截屏后是否下载
quality: .92,//图片质量,感觉没啥用
type: 'image/png',//图片格式
format: '.png'
},
// 5. 菜单
controlPlugins: [
// 因为想调用截屏功能，必须启用截屏按钮
// 该按钮我已通过css隐藏，如尾部css所示
screenShot,//显示截屏按钮
],
};
// 6. //播放器
let player = null;
// 7. 页面元素渲染后，onMounted里实例xgplayer
onMounted(() => {
// 8. 实例xgplaye ，并加载playerOpts配置
player = new Player(playerOpts)
// 视频加载完毕
player.once('ready', () => {
// 9. 监听截屏事件
// ↓↓↓↓↓↓↓↓↓↓事件参考地址 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
// https://v2.h5player.bytedance.com/api/#%E4%BA%8B%E4%BB%B6
// 监听screenShot截屏事件，截屏后触发该函数
player.on('screenShot', function (imgSrc) {
const emitVideoInfo = {
time: player.currentTime,
imgSrc: imgSrc, // 截屏后返回base64图片地址，直接放img的src即可渲染
}
emit('setVideoCurTimeAndSceShop', emitVideoInfo)
})
// 10. 视频进度条改变 - 拖动进度条实时截屏+时间
// 视频进度条改变（防抖）
player.on('seeked', debounce(myScreenShopt, 100, false));
})
})
// 11. 截屏函数
// 截屏需用【player.playerVideo.emit('screenShotBtnClick')】触发
// 为了方便父级调用，疯装成函数
function myScreenShopt() {
player.emit('screenShotBtnClick')
}
// 12. 共享截屏方法，便于父级调用
defineExpose({
myScreenShopt: myScreenShopt,//共享截屏函数
})
</script>
<style scoped>
#player {
width: 100%;
}
#player>>>.hide {
visibility: hidden;
}
/* 绑定playerOpts.hideScroll - 隐藏|显示截屏按钮 */
#player>>>.xgplayer-screenshot {
display: v-bind('playerOpts.hideScroll === true ? "none" : "block"');
}
</style>
2. 使用截屏（父级）
src/views/VideoView.vue
<template>
<!--
1. 使用xgplayer视频组件
ref="video" 重点这里，通过ref取到xgplayer实例与截屏函数
setVideoCurTimeAndSceShop 获取截屏|时间方法
videoBar.getVideoInfo => 拖动视频进度条，实时截屏 + 时间
-->
<video-player ref="video" @setVideoCurTimeAndSceShop="videoBar.getVideoInfo" />
<!-- 2. 点击按钮截屏 -->
<button @click="videoBar.videoInfo.myScreenShopt()">截屏</button>
<!-- 3. 时间-->
<p> 当前时间： {
{ videoBar.videoInfo.time }} </p>
<!-- 4. 图片-->
<img :src="videoBar.videoInfo.imgSrc" style="width: 100%;object-fit: cover;">
<!--
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
装有很多很多html代码
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
-->
</template>
<script setup>
import {
reactive, ref, onMounted } from 'vue';
// 5. 导入格式化时间工具
import {
format } from 'xgplayer/src/utils/util';
// 6. 通过ref获取视频组件
const video = ref(null);
// 7. 相关配置
const videoBar = reactive({
// 播放器信息
videoInfo: {
time: '',//时间 ，已格式化
imgSrc: '',// 图片地址
myScreenShopt: null,//截屏方法
},
// 8. 截屏方法
getVideoInfo(info) {
videoBar.videoInfo.imgSrc = info.imgSrc;
videoBar.videoInfo.time = format(info.time);
},
})
onMounted(() => {
// 组件渲染完成后，加载截屏方法
videoBar.videoInfo.myScreenShopt = video.value.myScreenShopt;
});
</script>
最终效果展示
- 大功告成，进度条拖到哪截到哪
1
2
3
不得不说，那时的港星要颜值有颜值，要演技有演技。
End
2023/3/9 00:53 辑
2023/3/9 10:49 一改
2023/3/9 16:50 二改
2023/3/9 23:08 三改
2023/3/10 10:54 四改
2023/3/11 10:15 五改