项目背景：

1. 后台给出一个地址，持续不断的推送flv视频流。

2.前端需要接收视频流，并寻找合适的播放插件。

一开始：

其实用的是xgplayer（西瓜视频）。

官网地址：西瓜播放器

使用的是直播，flv的插件：西瓜播放器 | xgplayer-flv。

但是无法播放，现象就是一直loading；

后来，查了好多资料，发现一个issue：

流数据正常下载，xgplayer-flv无法播放 · Issue #604 · bytedance/xgplayer · GitHub。

和我情况一模一样，但是暂时没有什么解决方案。说明，此路不通。

柳暗花明：

找了很久，找到一个万能播放插件 —— Jessibuca。

官网地址：Jessibuca

如何使用：

前端如何使用？建议直接下载相关资源，静态引入。

需要下载三个资源，如下图：

怎么找到这三个资源？去官网的network里找找吧，不在多说。

vue中使用详情：

首先，上边的三个文件引入public。在index.html文件中只需要引入jessibuca.js。

<!-- public下的index.html 直接引入js文件-->....<script src="<%= BASE_URL %>jessibuca.js"></script>.....

然后,创建视频播放组件 LiveVideoPlay.vue:

<script>
export default {name: "LiveVideoPlay",props: {// 播放地址playUrl: {type: String,required: true,},// 目标domidid: {type: String,required: true,},},data() {return {player: null,};},methods: {// 初始化视频组件initPlayer() {if (Jessibuca) {this.player = new Jessibuca({container: document.getElementById(this.id), //jessibuca需要容器videoBuffer: 0.2, // 缓存时长isResize: false,loadingText: "疯狂加载中...",useMSE: true,useWCS: true,debug: true,background: "@/assets/icons/svg/no-video.svg",supportDblclickFullscreen: true,showBandwidth: true, // 显示网速operateBtns: {fullscreen: true,screenshot: true,play: true,audio: true,},forceNoOffscreen: true,isNotMute: false,timeout: 10,});//console.log("this.player ----- ", this.player, this.playUrl);this.player.play(this.playUrl);}},},beforeDestroy() {// 销毁视频if (this.player) {this.player.destroy();this.player = null;}},mounted() {this.initPlayer();},
};
</script>
<template><div class="video-player-outer" :id="id"></div>
</template>
<style>
.video-player-outer {width: 100%;height: 100%;
}
</style>

最后,父组件中直接引用:

// 父组件中直接使用该组件<script>
import LiveVideoPlay from "./LiveVideoPlay.vue";
export default {name: '',components: {LiveVideoPlay },data () {return {playUrl1: null,playUrl2: null,showV1: false,showV2: false,}},methods: {handlePlayVideo(v) {if (v == 1) {this.playUrl1 ="https://xxxxxx/live/02.live.flv";this.showV1 = true;} else if (v == 2) {this.playUrl2 ="https://xxxxxx/live/02.live.flv";this.showV2 = true;}},StopPlayVideo(v) {if (v == 1) {this.showV1 = false;} else if (v == 2) {this.showV2 = false;}}, },
}</script><template><div class="box"><div class="video-box-item"><el-button @click="handlePlayVideo(1)">播放视频1</el-button><el-button @click="StopPlayVideo(1)">停止视频1</el-button><LiveVideoPlay v-if="showV1" :playUrl="playUrl1" id="v1" /></div><div class="video-box-item"><el-button @click="handlePlayVideo(2)">播放视频2</el-button><el-button @click="StopPlayVideo(2)">停止视频2</el-button><LiveVideoPlay v-if="showV2" :playUrl="playUrl2" id="v2" /></div></div></template>

如上,可以试一试自己的播放地址是否可以成功播放视频.