flv流视频播放插件及使用

1、b站flv.js的下载使用

npm install --save flv.js

<template>
 <!-- muted 静音-- 解决flvjs在有音频的情况下不能自动播放 -->
 <video id="videoElement" muted autoplay></video>
</template>
<script>
import flvjs from 'flv.js/dist/flv.min.js';

export default {
   data() {
        return{
         videoUrl:'xxxxx'
      }
    }
    mounted(){
    this.$nextTick(() => {
      this.createVideo();
    });    
  },
  methods: {
    createVideo(){
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement')
        var flvPlayer = flvjs.createPlayer({        // 创建实例
          type: 'flv',
          url: this.videoUrl,
          isLive: true,
          hasAudio: false  // 禁止音频
        })
        flvPlayer.attachMediaElement(videoElement)  // 挂载元素
        flvPlayer.load()                            // 加载视频流
        flvPlayer.play()                            // 播放视频流
      } 
    }
  },
};
</script>

来自：https://blog.csdn.net/weixin_43988812/article/details/108125030?spm=1001.2014.3001.5506

flvjs追帧，断流重连优化： 

https://blog.csdn.net/HJFQC/article/details/113188241

 2、flv-extend的下载使用

 flv-extend底层还是flvjs，针对flvjs做了优化（追帧、断流重连等）

 安装及使用

npm install flv-extend -S


<template>
 <!-- muted 静音-- 解决flvjs在有音频的情况下不能自动播放 -->
 <video id="videoElement" muted autoplay></video>
</template>
<script>
import FlvExtend from 'flv-extend'

export default {
   data() {
        return{
         videoUrl:'xxxxx'
      }
    }
    mounted(){
    this.$nextTick(() => {
      this.createVideo();
    });    
  },
  methods: {
    createVideo(){
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('videoElement');
        // 配置需要的功能
        const flv = new FlvExtend({
          element: videoElement, // *必传
          frameTracking: true, // 开启追帧设置
          updateOnStart: true, // 点击播放后更新视频
          updateOnFocus: true, // 获得焦点后更新视频
          reconnect: true, // 开启断流重连
          reconnectInterval: 0, // 断流重连间隔
          trackingDelta: 1, // 追帧最大延迟，延迟超过1s即开启追帧
          showLog: false    // 是否显示插件的log信息
        });
        // 调用 init 方法初始化视频
        // init 方法的参数与 flvjs.createPlayer 相同，并返回 flvjs.player 实例
        const player = flv.init(
          {
            type: 'flv',
            url: this.videoUrl,
            isLive: true,
            hasAudio: false
          },
          {
            enableStashBuffer: false, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
            autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
            stashInitialSize: 128, // 减少首帧显示等待时长
            enableWorker: true // 启用分离的线程进行转换
          }
        );
          // 直接调用play即可播放
        player.play();
      }
    }
  },
};
</script>