文章目录

• • @[toc]
• 需求
• • 最终效果图展示
• 1. 防抖
• 2. 导入防抖+截屏按钮+基础配置（子级）
• • 思路
• 2. 使用截屏（父级）
• 最终效果展示
• • 1
  • 2
  • 3
• 推荐

Xgplayer事件参考

---

需求

1. 自定义截屏按钮
2. 点击按钮截屏，获取图片地址，并预览图片
3. 获取当前截屏的时间
4. 拖动进度条时，实时截屏（需防抖）

最终效果图展示

• 截屏并预览图片+展示当前截屏时间
  

---

---

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. 导入防抖+截屏按钮+基础配置（子级）

思路

1. 开启截屏控件
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 五改

---

推荐

1. 【Xgplayer】xgplayer基本使用 & xgplayer使用 & 超级牛逼的前端视频播放器 && xgplayer前端最好视频播放器

2. 【xgplayer】xgplayer填坑记 && xgplayer全屏与css全屏冲突