前端FLV视频直播解决方案

项目背景：

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,
    },
    // 目标domid
    id: {
      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>

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