flv.js在vue项目的应用

环境准备

在index.html引入flv.js依赖

<script type='text/javascript' src="https://cdn.bootcss.com/flv.js/1.5.0/flv.js"></script>

数据准备好后播放视频

先取到接口数据，后播放。使用async await关键字实现顺序加载视频伪代码

在mounted生命周期内渲染视频

async getData() {
      await api(this.param).then(res => {
        ....
		....
      });
      this.videoPlay();
    },

多路视频播放与销毁，切换地址

flv.js在播放前需要检查是否已创建实例，如果已有实例，则销毁，在重新创建播放器实例。

  <video
          style="width:28vw;height:24vw;"
          id="videoElement"
           muted autoplay
        >{{unsupportedMsg}}</video>
		
		
		
data() {
    return {      
      unsupportedMsg:"您的浏览器不支持Video标签",
      flvPlayer: Object,
      flvPlayer2: Object,
      flvPlayer3: Object,
      flvPlayer4: Object,
      flvPlayer5: Object,
      flvPlayer6: Object,
      flvPlayer7: Object,
      flvPlayer8: Object
    };
  },
  
  methods: {
 destoryAll(){
        this.destory(this.flvPlayer);
        this.destory(this.flvPlayer2);
        this.destory(this.flvPlayer3);
        this.destory(this.flvPlayer4);
        this.destory(this.flvPlayer5);
        this.destory(this.flvPlayer6);
        this.destory(this.flvPlayer7);
        this.destory(this.flvPlayer8);
    },
    destory(flvplayer) {
      if (flvplayer && flvplayer._emitter && flvplayer.destroy) {
        flvplayer.destroy();
        flvplayer = null;
      }
    },
    play() {
      if (flvjs.isSupported()) {
        //if video source exists,play;otherwise destory it
        this.destory(this.flvPlayer);
        this.destory(this.flvPlayer2);
        if (this.videoSource.source1) {
          var play = document.getElementById("videoElement1");
          this.flvPlayer = flvjs.createPlayer({
            type: "flv",
            url: this.videoSource.source1,
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
            isLive: true,
            isAutoPlay: true,
            isContinue: true,
            lazyLoad: true
          });
          this.flvPlayer.attachMediaElement(videoElement1);
          this.flvPlayer.load();
          this.flvPlayer.on("error",(err)=>{
              console.error(err);
          });
          play.play();

          var play2 = document.getElementById("videoElement2");
          this.flvPlayer2 = flvjs.createPlayer({
            type: "flv",
            url: this.videoSource.source1,
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
            isLive: true
          });
          this.flvPlayer2.attachMediaElement(videoElement2);
          this.flvPlayer2.load();
          this.flvPlayer2.on("error",(err)=>{
              console.error(err);
          });
          play2.play();
        }
        this.destory(this.flvPlayer3);
        if (this.videoSource.source2) {
          var play3 = document.getElementById("videoElement3");
          this.flvPlayer3 = flvjs.createPlayer({
            type: "flv",
            url: this.videoSource.source2,
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
            isLive: true
          });
          this.flvPlayer3.attachMediaElement(videoElement3);
          this.flvPlayer3.load();
          this.flvPlayer3.on("error",(err)=>{
              console.error(err);
          });
          play3.play();
        }
        this.destory(this.flvPlayer4);
        if (this.videoSource.source3) {
          var play4 = document.getElementById("videoElement4");
          this.flvPlayer4 = flvjs.createPlayer({
            type: "flv",
            url: this.videoSource.source3,
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
            isLive: true
          });
          this.flvPlayer4.attachMediaElement(videoElement4);
          this.flvPlayer4.load();
          this.flvPlayer4.on("error",(err)=>{
              console.error(err);
          });
          play4.play();
        }
        this.destory(this.flvPlayer5);
        if (this.videoSource.source4) {
          var play5 = document.getElementById("videoElement5");
          this.flvPlayer5 = flvjs.createPlayer({
            type: "flv",
            url: this.videoSource.source4,
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
            isLive: true,
            cors:true
          });
          this.flvPlayer5.attachMediaElement(videoElement5);
          this.flvPlayer5.load();
          this.flvPlayer5.on("error",(err)=>{
              console.error(err);
          });
          play5.play();
        }
        this.destory(this.flvPlayer6);
        if (this.videoSource.source5) {
          var play6 = document.getElementById("videoElement6");
          this.flvPlayer6 = flvjs.createPlayer({
            type: "flv",
            url: this.videoSource.source5,
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
            isLive: true
          });
          this.flvPlayer6.attachMediaElement(videoElement6);
          this.flvPlayer6.load();
          this.flvPlayer6.on("error",(err)=>{
              console.error(err);
          });
          play6.play();
        }
        this.destory(this.flvPlayer7);
        if (this.videoSource.source6) {
          var play7 = document.getElementById("videoElement7");
          this.flvPlayer7 = flvjs.createPlayer({
            type: "flv",
            url: this.videoSource.source6,
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
            isLive: true
          });
          this.flvPlayer7.attachMediaElement(videoElement7);
          this.flvPlayer7.load();
          this.flvPlayer7.on("error",(err)=>{
              console.error(err);
          });
          play7.play();
        }
        this.destory(this.flvPlayer8);
        if (this.videoSource.source7) {
          var play8 = document.getElementById("videoElement8");
          this.flvPlayer8 = flvjs.createPlayer({
            type: "flv",
            url: this.videoSource.source7,
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
            isLive: true
          });
          this.flvPlayer8.attachMediaElement(videoElement8);
          this.flvPlayer8.load();
          this.flvPlayer8.on("error",(err)=>{
              console.error(err);
          });
          play8.play();
        }
      }
    },
    changeVideo(url) {
      this.destory(this.flvPlayer);
      //切换第一个视频地址
      var player = document.getElementById("videoElement1");
      this.flvPlayer = flvjs.createPlayer({
        type: "flv",
        url: url,
        enableWorker: true,
        enableStashBuffer: false,
        stashInitialSize: 128,
        isLive: true,
        isAutoPlay: true,
        isContinue: true,
        lazyLoad: true
      });
      this.flvPlayer.attachMediaElement(videoElement1);
      this.flvPlayer.load();
      player.play();
    }
  }

注意问题

父组件数据源变化后，子组件视频需要刷新方式

使用watch监听器
父组件内，在子组件上增加ref引用，使用this.$refs['v'].play()调用子组件的play方法，此方法更直观，更好！

浏览器最多加载6路视频限制

浏览器对于同源视频地址最多加载6路视频，可以对多出的2路视频使用域名代理解决，也可以使用其他单独的域名处理

跨域问题

服务器增加access-control-allow-origin:*，允许任意客户端访问。 flv.js实例默认cors:true启用cors，如果设置成false，则必须是客户端和视频域名地址必须同源才能播放

来源：oschina

链接：https://my.oschina.net/odetteisgorgeous/blog/3158905

标签

Vue.js

Flv.js