vue2 播放锐明flv格式的视频

一、flv.js

1、 flv.js 来在 HTML5 视频元素上播放 FLV 视频流。需要先安装flv.js

    npm install --save flv.js 

2、显示视频的位置

  <video id="videoElement" controls class="video" muted />

3、引入js文件

import flvjs from 'flv.js'

 // 显示视频信息
    showVideo(videoUrl,data,index) {
      // 视频是单独的端口
      if(flvjs.isSupported()){const videoElement = document.getElementById(videoElement); //获取video的dom元素
          const flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            hasAudio: false,
            url: videoUrl
          },{
            autoCleanupSourceBuffer:true, // 对SourceBuffer进行自动清理缓存
            enableStashBuffer: false, // 关闭IO隐藏缓冲区
            stashInitialSize: 128
          });
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          flvPlayer.play();
          this.playList.push(flvPlayer);
          // 事件监听
          flvPlayer.on(flvjs.Events.ERROR,(err, errdet) =>{
            if(err == flvjs.ErrorTypes.NETWORK_ERROR){
              this.singleDestroy(flvPlayer);
              this.$publicmethod.showMessage("连接超时", this.$publicmethod.ErrorType)
            }
            if(err == flvjs.ErrorTypes.OTHER_ERROR){
              this.singleDestroy(flvPlayer);
              this.$publicmethod.showMessage("其他异常", this.$publicmethod.ErrorType)
            }
          })
      }else{
        this.$publicmethod.showMessage("flvjs不支持", this.$publicmethod.ErrorType)
      }

4、部署生产环境的时候，如果生产环境是https的需要配置nginx

location /bdVideo {
   proxy_pass http://ip:端口/live.flv;
   proxy_set_header Host $host:$server_port;
   proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

 5、接口返回的视频地址需要相应的修改，开头对应的是生产环境地址

https:生产环境ip:生产环境port:/bdVideo?地址