vue3+xgplayer使用

一、安装

yarn add xgplayer

目前安装版本是3.0.20

二、mp4使用方式

<template>
	<div class="video-container">
		<div ref="videoPlayer"></div>
	</div>
</template>
``
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import Player from 'xgplayer';  // 引入xgplayer
import 'xgplayer/dist/index.min.css'; // 引入css

import aaa from '@/assets/images/aaa.mp4';  //引入本地的视频
import aaaa from '@/assets/images/aaaaa.mp4'; // 引入本地的视频

const videoPlayer = ref(null);

let player: any = null;

// 定义清晰度列表
const definitionList = [
	{
		name: '超清',
		url: aaaa,
		definition: 'FHD',
	},
	{
		name: '高清',
		url: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4',
		definition: 'HD',
	},
	{
		name: '标清',
		url: aaa,
		definition: 'SD',
	},
];

onMounted(() => {
	player = new Player({
		el: videoPlayer.value,
		url: '',
		poster: aaa,
		width: '800px',
		height: '450px',
		autoplay: false,
		definition: { list: definitionList, seamless: true, defaultDefinition: 'FHD' }, //这里与其他人使用解释不同，在查看源码之后才发现是这样使用。
		controls: true,
	});

	player.on('definitionChange', (newDefinition: any) => {
		console.log('切换到清晰度:', newDefinition.name);
	});
});

onBeforeUnmount(() => {
	if (player) {
		player.destroy(true);
		player = null;
	}
});
</script>

<style lang="less" scoped>
.video-container {
	width: fit-content;
	height: fit-content;
}
</style>