Flv.js讲解

Flv讲解

Flv.js

---

---

常见的几种直播协议

HTTP-FLV: 基于HTTP流式IO传输FLV，依赖浏览器支持播放FLV。

WebSocket-FLV: 基于WebSocket传输FLV，依赖浏览器支持播放FLV。WebSocket建立在HTTP之上，建立WebSocket连接前还要先建立HTTP连接。

HLS: Http Live Streaming，苹果提出基于HTTP的流媒体传输协议。HTML5可以直接打开播放。

RTP: 基于UDP，延迟1秒，浏览器不支持。

在支持浏览器的协议里，延迟排序是：
RTMP = HTTP-FLV = WebSocket-FLV < HLS
而性能排序恰好相反：
RTMP > HTTP-FLV = WebSocket-FLV > HLS
也就是说延迟小的性能不好。

一、Flv.js是什么？

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash，使浏览器在不借助Flash的情况下播放FLV成为可能。 

二、Flv.js的优势

1.由于浏览器对原生Video标签采用了硬件加速，性能很好，支持高清

代码如下（示例）：

<div class="mainContainer">
    <video name="videoElement" class="centeredVideo" id="videoElement" autoplay></video>
    <div class="btnList">
      <div class="playbtn" @click="flvPLayOrPause()">
        <i v-if="pauseOrPlay" class="el-icon-video-play"></i>
        <i v-else class="el-icon-video-pause"></i>
      </div>
    </div>
  </div>

2.同时支持录播和直播

代码如下（示例）：

 flvInit() {
   
      let flvurl = this.configflv.flvurl
      let flvtype = this.configflv.flvtype
      let videoElement = document.getElementById("videoElement");
      let flvPlayer = flvjs.createPlayer(
        {
   
          type: flvtype,
          isLive