vue中视频播放器xgplayer的使用（点播与直播）

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，默认值为 undefinedmode: 'cors'}}});
}
onMounted(() => {onLoad()
})
</script>
<style scoped></style>

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