官网：西瓜播放器
1、首先安装下载 XgPlay.js依赖
npm i xgplayer --save npm i xgplayer-hls.js --save
2、页面引用
import FlvPlayer from "xgplayer-flv.js"; import "xgplayer/dist/index.min.css";
3、建立dom容器
// 提供一个容器 <div id='xg></div>
4、初始化
initPlayer() {
let _this = this;
if (!this.url) return console.warn("url is not esist");
const config = {
id: this.id,
url: this.url,
fluid: true,
//playsinline: true,
isLive: true,
cors: 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: false,
thumbnail: {
height: 25,
},
pipConfig: {
bottom: 0,
right: 0,
width: 320,
height: 80,
},
// download: true,
/**初始化首帧 */
videoInit: true,
autoplay: true,
autoplayMuted: true,
screenShot: {
saveImg: true,
quality: 0.92,
type: "image/png",
format: ".png",
},
// 菜单控件
controlPlugins: [],
};
//========================== 2，开始实例化======================
const player = new FlvPlayer(config);
if (player) {
this.player = player;
// this.player.getCssFullscreen()
//
// setTimeout(()=>{
// this.player.exitCssFullscreen()
// },5000)
/* 这里注册监听 */
// this.player.once('complete', () => {
// console.log('complete')
// try {
// this.player.play() // 尝试再次执行播放
// setTimeout(() => { // 500毫秒收检测
// if (!this.player.hasStart && this.player.currentTime ===
// 0) { // hasStart返回false，并且播放时间还是0，那么就可以认为自动播放失效了
//
// }
// }, 500)
// } catch (e) {
// console.log(e);
// }
// });
// 监听视频开始播放 播放传给父组件的是true
this.player.on("play", () => {
this.$emit("triggerEvent", true);
});
// 监听视频已经暂停 暂停传给父组件的是true
this.player.on("pause", () => {
this.$emit("triggerEvent", false);
});
// 视频加载失败，报错误提示
this.player.on("error", () => {
console.log("视频加载错误，请确认视频地址后再连接!");
//this.$message.warning('视频加载错误，请确认视频地址后再连接!');
});
// 监听 视频退出全屏
// this.player.on('exitFullscreen', () => {
// window.scrollTo(0, 0);
// console.log('已经退出全屏了');
// });
//检测画面是否卡死。如果decodedFrames不再发生变化,就销毁掉该实例并进行重新连接。
this.player.on("statistics_info", function (res) {
if (_this.lastDecodedFrame == 0) {
_this.lastDecodedFrame = res.decodedFrames;
return;
}
if (_this.lastDecodedFrame != res.decodedFrames) {
_this.lastDecodedFrame = res.decodedFrames;
_this.sameCount = 0;
} else {
_this.sameCount++;
console.log(
"decodedFrames没有发生变化第",
_this.sameCount,
"次。时间：",
new Date()
);
if (_this.sameCount > 9) {
//decodedFrames10秒不变，则判断为画面卡死，销毁实例进行重连
console.log(
"画面卡死，进行重连————————player:",
_this.player,
".时间",
new Date()
);
//重置变量
_this.lastDecodedFrame = 0;
_this.sameCount = 0;
if (_this.player) {
_this.player.destroy(); //销毁
_this.getData(); //重连
console.log("重连完毕");
}
}
}
});
}
},
5、视频效果
6、在Vue中使用封装组件
<template>
<div style="position: relative; width: 100%; height: 100%">
<div
class="video-player"
:id="id"
className="video-player1"
style="height: 100% !important; padding-top: 0 !important"
></div>
<!-- <div style="position: absolute;bottom:0;right:0">放大</div>-->
</div>
</template>
<script>
//import Player from 'xgplayer';
import FlvPlayer from "xgplayer-flv.js";
import "xgplayer/dist/index.min.css";
// import volume from "xgplayer/dist/controls/volume";
// import playbackRate from "xgplayer/dist/controls/playbackRate";
export default {
props: {
......
},
data() {
return {
player: null, //实例
lastDecodedFrame: 0, //最后一个decodedFrame
sameCount: 0, //decodedFrame不变次数
};
},
mounted() {
console.log("传过来的url:", this.url);
// 初始化播放器
this.initPlayer();
},
created() {},
// 监听播放路径的变化
watch: {
url: {
......
},
},
methods: {
// =========================1，设置播放器必要参数===================
initPlayer() {
let _this = this;
if (!this.url) return console.warn("url is not esist");
......
// 菜单控件
controlPlugins: [],
};
//========================== 2，开始实例化======================
const player = new FlvPlayer(config);
if (player) {
this.player = player;
//检测画面是否卡死。如果decodedFrames不再发生变化,就销毁掉该实例并进行重新连接。
this.player.on("statistics_info", function (res) {
if (_this.lastDecodedFrame == 0) {
_this.lastDecodedFrame = res.decodedFrames;
return;
}
if (_this.lastDecodedFrame != res.decodedFrames) {
_this.lastDecodedFrame = res.decodedFrames;
_this.sameCount = 0;
} else {
_this.sameCount++;
console.log(
"decodedFrames没有发生变化第",
_this.sameCount,
"次。时间：",
new Date()
);
if (_this.sameCount > 9) {
//decodedFrames10秒不变，则判断为画面卡死，销毁实例进行重连
console.log(
"画面卡死，进行重连————————player:",
_this.player,
".时间",
new Date()
);
//重置变量
_this.lastDecodedFrame = 0;
_this.sameCount = 0;
if (_this.player) {
_this.player.destroy(); //销毁
_this.getData(); //重连
console.log("重连完毕");
}
}
}
});
}
},
......
},
};
</script>
7、使用XgPlay.js组件
7.1 注册组件
import xgPlayVideo from '@/components/xgPlayVideo.vue'
7.2 使用组件
<xgPlayer :id="'XgPlayerDom'" :url="videoUrl"></xgPlayer>
提供测试地址：
//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4
资源共享：
https://download.csdn.net/download/u012967771/88769868
https://download.csdn.net/download/u012967771/88769868