直播流flv.js的具体使用

简介
Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。

常见直播协议

RTMP: 底层基于TCP，在浏览器端依赖Flash。
HTTP-FLV: 基于HTTP流式IO传输FLV，依赖浏览器支持播放FLV。
WebSocket-FLV: 基于WebSocket传输FLV，依赖浏览器支持播放FLV。WebSocket建立在HTTP之上，建立WebSocket连接前还要先建立HTTP连接。
HLS: Http Live Streaming，苹果提出基于HTTP的流媒体传输协议。HTML5可以直接打开播放。
RTP: 基于UDP，延迟1秒，浏览器不支持。
Flv.js概览

一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

flv.js只做了一件事，在获取到FLV格式的音视频数据后通过原生的JS去解码FLV数据，再通过Media Source Extensions API 喂给原生HTML5 Video标签。(HTML5 原生仅支持播放 mp4/webm 格式，不支持 FLV)

HTML5 原生仅支持播放 mp4/webm 格式，flv.js 实现了在 HTML5 上播放 FLV 格式视频。

flv.js在获取到FLV格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，再通过Media Source Extensions API 传递给原生HTML5 Video标签进行播放。

flv.js 是使用 ECMAScript 6 编写的，然后通过 Babel Compiler 编译成 ECMAScript 5，使用 Browserify 打包。

简单示例
<template>
  <div>
     // 视频自动播放，controls是否显示播放器按钮
    <video preload="auto" muted autoplay></video> 
  </div>
</template>
<script>
    data() {
        return {
            flvPlayer: null,
        }; 
    },
    mounted() {
           this.$nextTick(() => {
          this.playflv()
        })
    },
    methods: {
        //使用flv.js实现播放flv格式流，获取video节点
        playflv() {
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement');
                var flvPlayer = flvjs.createPlayer({
                  type: 'flv',
                  url: 'http://127.0.0.1:19677/flv',
                  isLive: true,                   //数据源是否为直播流
                  hasAudio: true,                //数据源是否包含有音频
                  hasVideo: true,                 //数据源是否包含有视频
                  enableStashBuffer: false        //是否启用缓存区
                },{
                  enableWorker: false,            //不启用分离线程
                  enableStashBuffer: false,       //关闭IO隐藏缓冲区
                  autoCleanupSourceBuffer: true   //自动清除缓存
                });
                this.flvPlayer = flvPlayer
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
                flvPlayer.play();
              }
        },
        //关闭视频流
        destoryVideo() {
          if (this.flvPlayer) {
            this.flvPlayer.pause();// 暂停播放数据流
            this.flvPlayer.unload();// 取消数据流加载
            this.flvPlayer.detachMediaElement();// 将播放实例从节点中取出
            this.flvPlayer.destroy(); // 销毁播放实例
            this.flvPlayer = null;
          }
        },
    },
    beforeDestroy() {  
        this.destoryVideo(); 
    },
</script>