1. 点播视频

点播视频）是一种多媒体服务形式，允许用户随时随地选择并观看视频内容，而不是按照预设的时间表来观看。

xgplayer是一个开源的 HTML5 视频播放器，由字节跳动公司开发并维护。它最初是为了满足短视频平台的播放需求而设计的，具有高性能和高度可定制的特点。xgplayer适用于移动设备和桌面设备，支持多种视频格式和流媒体协议，包括HLS、FLV、MP4等。

1.1 实现功能：

1. 支持视频倍速播放（xgplayer内置，不用额外设置）
2. 不同清晰度切换（前提要有不同清晰度对应的视频）
3. 进度条可以预览缩略图（需要存放雪碧图）

1.2 实现代码

安装xgplayer：

pnpm install xgplayer

具体代码：

<template>
    <div ref="playerRef" >
    </div>
</template>
<script setup lang="ts">
import Player   from 'xgplayer';
import 'xgplayer/dist/index.min.css';

const playerRef = ref();

const onLoad = () => {
    let player = new Player({
        el: playerRef.value,
        url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
        height: 400,
        width: 500,
        autoplay: true,// 是否自动播放（默认false）
        autoplayMuted: true,// 是否自动静音自动播放（默认false）
        screenShot: true,// 是否使用截图（默认false）
        videoAttributes: {// video扩展属性
            crossOrigin: 'anonymous',// 元素获取数据的 CORS 请求的配置
        },
        marginControls: false,// 是否开启画面和控制栏分离模式（默认false）
        loop:true,// 是否开启循环播放（默认false）
        volume:0.3,// 默认音量,取值范围0 ~ 1(默认0.6)
        commonStyle:{
            progressColor: '#cccccce6',//进度条底色
        },
        thumbnail: {// 进度条预览图配置
            pic_num: 44,//预览图总帧数
            width: 160,// 预览图每一帧的宽度
            height: 90,// 预览图每一帧的高度
            col: 10,// 每张雪碧图包含的预览图列数
            row: 10,// 每张雪碧图包含的预览图行数
            // 雪碧图url列表
            urls: ['//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-thumbnail.jpg'],
        },
        download: true,// 示下载按钮
        
    });

    // 清晰度切换
    player.emit('resourceReady', [{ name: '超清', definition: '1080p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' }, { name: '高清', definition: '720p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4' }, { name: '标清', definition: '480p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4' }]);
}
onMounted(() =>{
    onLoad()
})
</script>
<style scoped>
</style>

进度条预览图中使用的雪碧图：

2. 直播视频

·xgplayer-flv· 可用于播放 flv的点播和直播视频流。它可以作为 xgplayer 插件集成到 xgplayer 使用，或单独使用。
安装xgplayer-flv插件：

pnpm i -S xgplayer-flv

2.1 实现代码

<template>
    <div ref="playerRef">
    </div>
</template>
<script setup lang="ts">
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import FlvPlugin from 'xgplayer-flv'

const playerRef = ref();
const onLoad = () => {
     new Player({
        el: playerRef.value,
        height: 400,
        width: 500,
        url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv',
        plugins: [FlvPlugin],//使用插件
        autoplayMuted: true,// 是否自动静音自动播放（默认false）
        screenShot: true,// 是否使用截图（默认false）
        videoAttributes: {// video扩展属性
            crossOrigin: 'anonymous',// 元素获取数据的 CORS 请求的配置
        },
        marginControls: false,// 是否开启画面和控制栏分离模式（默认false）
        isLive: true,// 是否是直播
        // flv 插件参数
        flv: {
            retryCount: 3, // 重试 3 次，默认值
            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
            loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
            fetchOptions: {
                // 该参数会透传给 fetch，默认值为 undefined
                mode: 'cors'
            }
        }

    });
}
onMounted(() => {
    onLoad()
})
</script>
<style scoped></style>

xgplayer播放器- 弹幕插件使用
xgplayer播放器官网