flv.js在vue项目的应用

原创
2020/01/16 11:45
阅读数 5.4K

环境准备

在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,
	  //以下定时器解决视频延迟问题,退出页面记得在beforeDestroy生命周期里关掉
	  timer1:null,
	  timer2:null
	  timer3:null
	  timer4:null
	  timer5:null
	  timer6:null
	  timer7:null
	  timer8:null
    };
  },
  
  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();
		   //解决延迟问题 2020/01/20
          this.timer1 = this.solveLatency(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.timer2 = this.solveLatency(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.timer3 = this.solveLatency(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.timer4 = this.solveLatency(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.timer5= this.solveLatency(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.timer6 = this.solveLatency(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.timer7 = this.solveLatency(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();
		   this.timer8 = this.solveLatency(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();
    }
  }

注意问题

  1. 父组件数据源变化后,子组件视频需要刷新方式
  • 使用watch监听器
  • 父组件内,在子组件上增加ref引用,使用this.$refs['v'].play()调用子组件的play方法,此方法更直观,更好!
  1. 浏览器最多加载6路视频限制

浏览器对于同源视频地址最多加载6路视频,可以对多出的2路视频使用域名代理解决,也可以使用其他单独的域名处理,或者配置浏览器参数(firefox可以配置)

  1. 跨域问题

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

  1. 视频延迟

flv播放视频一段时间后会出现延迟几秒问题,使用监听器解决

  1. 资源销毁

在退出当前页面时,要在beforeDestroy里销毁所有播放器实例和定时器,释放资源

  1. 切换页面,视频还在拉流

修改flv.js源代码,重新打包依赖,可以参考github issues修改

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部