fiv.js实现flv文件blob流实时播放的项目实践

cnpm install video-js -S
cnpm install videojs-flash -S

cnpm i flv.js

<template>
  <div>
    <div id="video-container">
      <div class="video-box" v-for="(video,index) in videoList" :key="index">
        <video :id="'video'+index" ref="videoElement" controls autoplay muted ></video>
      </div>
    </div>
  </div>
</template>
<script>
import flvjs from 'flv.js'
export default {
  data() {
    return {
      videoPlayer: null,
      videoList: [
        {
          src: 'flv视频流地址'
        }
      ]
    };
  },
  mounted() {
    this.playVideo()
  },
  methods: {
    playVideo(){
        this.vloading = true;
        this.videoList.forEach((item,index) => {
          if (flvjs.isSupported()) {
            let player = null;
            let videoElement = document.getElementById("video" + index);
            player = flvjs.createPlayer({
              type: "flv", //=> 媒体类型 flv 或 mp4
              isLive: true, //=> 是否为直播流
              hasAudio: false, //=> 是否开启声音
              url: item.src, //=> 视频流地址
            });
            player.attachMediaElement(videoElement); //=> 绑DOM
            player.load();
            player.play();

          } else {
            this.$message.error('不支持flv格式视频')
          }
          this.vloading = false;
        })
      },
  },
};
</script>
<style lang="scss" scoped>
#video-container {
}
</style>

cnpm i -s hls.js

 <template>
  <section>
    <video class="full-height full-width" ref="video" controls></video>
  </section>
</template>

<script>
  let Hls = require('hls.js');
  export default {
    data() {
      return {
        hls: '',
        src: 'm3u8视频流地址'
      };
    },
    mounted() {
           this.getStream(src)
    },
    methods: {
      videoPause() {
        if (this.hls) {
          this.$refs.video.pause();
          this.hls.destroy();
          this.hls = null;
        }
      },
      getStream(source) {
        if (Hls.isSupported()) {
          this.hls = new Hls();
          this.hls.loadSource(source);
          this.hls.attachMedia(this.$refs.video);
          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
            console.log('加载成功');
            this.$refs.video.play();
          });
          this.hls.on(Hls.Events.ERROR, (event, data) => {
            // console.log(event, data);
            // 监听出错事件
            console.log('加载失败');
          });
        }
      },
      beforeDestroy() {
        this.videoPause();
      }
    }
  };
</script>