javascript vue.js 前端 vue项目中使用XgPlay.js播放视频

// 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中使用封装组件

7、使用XgPlay.js组件

7.1 注册组件

import xgPlayVideo from '@/components/xgPlayVideo.vue'

7.2 使用组件

提供测试地址：

//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4

资源共享：

https://download.csdn.net/download/u012967771/88769868https://download.csdn.net/download/u012967771/88769868

相关文章

 您阅读本篇文章共花了：