Vue 实现 西瓜视频播放器插件 自行选择倍速 Xgplayer

1.安装

npm install xgplayer-vue@latest

2.使用 

         2.1 template页面

<template>
	<view>
		<!-- -------------- video-->
		<Xgplayer ref="myPlayer" :config="playerConfig" @player="onPlayerReady" />
	</view>
</template>

        2.2  script页面

<script>
	import Xgplayer from 'xgplayer-vue';
	export default {
		components: {
			Xgplayer
		},
		data() {
			return {
				initialConfig: {
					id: 'vs',
					url: '', // 初始时可以设置一个默认URL或空字符串  
					width: '100%',
					height: 230,
					playbackRate: [0.5, 1, 2, 3],
					autoplay: true
				},
				playerConfig: {}, // 用于存储传递给Xgplayer的当前配置  
				Player: null,
				YoId: ''
			};
		},
		
		created() {
			this.fetchVideoUrl();
		},
		
		methods: {
            //fetchVideoUrl 可切换成接口里的视频字段
			fetchVideoUrl() {
				const videoUrl =
					'视频链接';  
				this.updatePlayerConfig(videoUrl);
			},
			updatePlayerConfig(videoUrl) {
				// 创建一个新的配置对象，以避免直接修改响应式数据可能导致的问题  
				const newConfig = {
					...this.initialConfig,
					url: videoUrl
				};
				this.playerConfig = newConfig; // 更新传递给Xgplayer的配置  
			},
			onPlayerReady(player) {
				this.Player = player;
			},

		}
	};
</script>

        2.3 style页面

                自行排版即可