1.安装
# 最新稳定版 $ npm install xgplayer
2,封装西瓜播放器
<template>
<div id="video-player" class="video-player"></div>
</template>
<script>
import Player from 'xgplayer';
export default {
props: {
url: {
// 父组件传过来的视频链接
type: String,
default: '',
},
},
data() {
return {
player: null, //实例
};
},
mounted() {
console.log('传过来的url:', this.url);
// 初始化播放器
this.initPlayer();
},
created() {},
// 监听播放路径的变化
watch: {
url: {
handler(newValue, oldValue) {
if (!this.player) {
this.initPlayer();
return;
}
this.player.src = this.url;
},
},
},
methods: {
// =========================1,设置播放器必要参数===================
initPlayer() {
if (!this.url) return console.warn('url is not esist');
const config = {
id: 'video-player',
url: this.url,
fluid: true,
/**倍速播放 */
playbackRate: [0.5, 0.75, 1, 1.5, 2],
defaultPlaybackRate: 1,
playsinline: this.isAppleDevice(), // IOS设备设置,防止被浏览器劫持
'x5-video-player-type': 'h5', // 微信内置浏览器设置,防止被浏览器劫持
'x5-video-orientation': 'portraint',
/**画中画 */
pip: true,
pipConfig: {
bottom: 100,
right: 100,
width: 320,
height: 180,
},
// download: true,
/**初始化首帧 */
videoInit: true,
autoplay: true,
};
//========================== 2,开始实例化======================
const player = new Player(config);
if (player) {
this.player = player;
/* 这里注册监听 */
// 监听视频开始播放 播放传给父组件的是true
this.player.on('play', () => {
this.$emit('triggerEvent', true);
});
// 监听视频已经暂停 暂停传给父组件的是true
this.player.on('pause', () => {
this.$emit('triggerEvent', false);
});
// 监听 视频退出全屏
// this.player.on('exitFullscreen', () => {
// window.scrollTo(0, 0);
// console.log('已经退出全屏了');
// });
}
},
// IOS设备设置,防止被浏览器劫持
isAppleDevice() {
const ua = navigator.userAgent.toLowerCase();
return /iphone|ipad|phone|Mac/i.test(ua);
},
},
};
</script>
<style></style>
3,父组件中使用
<template>
<div>
<h1>西瓜播放器XgPlayer演示</h1>
<hr />
<div class="videoPlayer">
<xg-player :url="videoUrl" @triggerEvent="triggerEvent" ></xg-player>
</div>
</div>
</template>
<script>
import config from '../../config';
import XgPlayer from '@/components/XgPlayer';
export default {
directives: {},
// 注册组件
components: {
XgPlayer,
},
data() {
return {
videoUrl: `${config.publicPath}video/30周年完整+音乐音效3.mp4`,
};
},
methods: {
// 监听到子组件传过来的播放状态 true是播放 false是暂停
triggerEvent(value){
console.log("是否播放:",value);
},
},
};
</script>
<style lang="scss" scoped>
.videoPlayer {
height: 300px;
width: 500px;
margin: 0 auto;
}
</style>