視頻播放器（直播、錄播一體化）解決方案（video.js + flv.js + videojs-flvjs）

背景描述：

實現(xiàn)一款視頻播放器，同時支持直播和錄播功能

功能清單：

支持解析m3u8或flv兩種直播流，
支持錄播且多段分段視頻播放
支持直播流之間互相切換
支持直播與錄播之間互相切換
支持播放器工具欄定制化開發(fā)

技術(shù)選型

video.js + flv.js + videojs-flvjs

videojs

Video.js是專為HTML5世界打造的網(wǎng)絡(luò)視頻播放器。它支持HTML5和Flash視頻，以及YouTube和Vimeo（通過插件）。它支持在臺式機和移動設(shè)備上播放視頻。該項目始于2010年年中，現(xiàn)在已在播放器上使用50,000 100,000 200,000 40萬個網(wǎng)站。

定位： HTML5 & Flash video player

特點：
支持直播、錄播、以及集成第三方插件播放技術(shù)，同事支持定制化控制欄開發(fā)；
并且在該社區(qū)已經(jīng)建立了數(shù)百個您可以安裝的皮膚和插件，例如Chromecast，IMA甚至VR

初始化方式：

1.引用庫

 <link  rel="stylesheet">
 <script src="http://vjs.zencdn.net/7.3.0/video.min.js"></script>

  1. html部分

    <video  id="my-player" class="video-js">
   <p class="vjs-no-js">
     To view this video please enable JavaScript, and consider upgrading to a web browser that
     <a  target="_blank">
       supports HTML5 video
     </a>
  </p>
</video>

  2. js部分

    var player = videojs('my-player', {
    techOrder: ["html5"],
    autoplay: "muted",
    controls: true,
    controlBar: {
       volumePanel: false,
       remainingTimeDisplay: false,
       progressControl: false,
       fullscreenToggle: false,
       audioTrackButton: false,
       playToggle: false,
       liveDisplay: false,
       pictureInPictureToggle: false
    },
    sources: [
         {
           src: "http://localhost:8083/video/video/oceans.mp4",
           type: "video/mp4"  //錄播
         },
        {
           src: "http://ivi.bupt.edu.cn/hls/hunanhd.m3u8",
           type: "application/x-mpegURL"  //直播
         }
     ]
   }, function onPlayerReady() {
      videojs.log('Your player is ready!');
      // In this context, `this` is the player that was created by Video.js.
      this.play();
      // How about an event listener?
      this.on('ended', function() {
      videojs.log('Awww...over so soon?!');
    });
});

代碼解釋：當(dāng)錄播源oceans.mp4初始化不成功的情況下會采用湖南衛(wèi)視直播流進行播放（不支持多段分段處理），且定制化了默認(rèn)組件初始化方式

flvjs

用純JavaScript編寫的HTML5 Flash Video（FLV）播放器，不帶Flash，
flv.js的工作原理是將FLV文件流轉(zhuǎn)換為ISO BMFF（分段MP4）段，然后<video>通過Media Source Extensions API 將mp4段饋送到HTML5 元素中。

定位：HTML5 FLV Player

特點：
具有H.264 + AAC / MP3編解碼器播放功能的FLV容器
多段分段視頻播放
HTTP FLV低延遲實時流播放
通過WebSocket進行FLV實時流播放
與Chrome，F(xiàn)ireFox，Safari 10，IE11和Edge兼容
極低的開銷，瀏覽器可以加速硬件

初始化方式：

1.引用庫

<script src="flv.min.js"></script>

2.html部分

<video id="videoElement"></video>

3.js部分

//場景1：直播
if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: "https://dlhdl-cdn.zhanqi.tv/zqlive/197952_NHycj.flv",
        isLive: true
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
}

 //場景2：錄播（單段）
if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'http://localhost:8083/video/video/bbb.flv'
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
}
 //場景3：錄播（多段分段）
if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flvjs.createPlayer({
        type: 'flv',
        duration: 73000,
        segments: [
          {
            duration: 33000,
            url: "http://localhost:8083/video/video/bbb.flv"
          },
          {
            duration: 40000,
            url: "http://localhost:8083/video/video/play.flv"
          }
        ]
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
}

期中總結(jié)：
就目前前面所看到的，videojs滿足了直播及錄播部分的功能但對于多段處理沒有解決辦法，而flvjs滿足了直播，錄播，多段處理，但對于視頻格式局限于flv，且不能定制化開發(fā)控制欄

videojs與flvjs本質(zhì)上是兩個不相關(guān)的庫，無論是技術(shù)上還是初始化實現(xiàn)上，而我們的需求功能點恰巧分散在這兩個庫中，如何將其融合呢，接下來登場的是videojs-flv

videojs-flvjs

該庫允許Video.js技術(shù)使用flv.js通過MSE（而非Flash）播放FLV

定位：讓videojs可以使用flvjs的技術(shù)去播放FLV格式視頻文件

初始化方式：

1.引用庫

<!-- Video.js -->
<link href="http://path/to/video-js.css" rel="stylesheet">
<script src="http://path/to/video.min.js"></script>
<!-- flv.js -->
<script src="http://path/to/flv.min.js"></script>
<!-- videojs-flvjs -->
<script src="http://path/to/videojs-flvjs.min.js"></script>

2.html部分

<video id="videojs-flvjs-player"></video>

3.js部分

 //場景1 錄播(單段)
videojs('videojs-flvjs-player', {
  techOrder: ['html5', 'flvjs'],
  flvjs: {
    mediaDataSource: {
      isLive: false,
      cors: true,
      withCredentials: false
    }
  },
  sources: [{ src: "http://localhost:8083/video/video/bbb.flv", type: "video/flv"}]
});

//場景2 錄播(多段)
videojs('videojs-flvjs-player', {
  techOrder: ['html5', 'flvjs'],
  flvjs: {
    mediaDataSource: {
        isLive: false,
        cors: true,
        withCredentials: false,
        duration: 73000,
        segments: [
          {
            duration: 33000,
            url: "http://localhost:8083/video/video/bbb.flv"
          },
          {
            duration: 40000,
            url: "http://localhost:8083/video/video/play.flv"
          }
        ]
    },
    sources: [{ src: "-1", type: "video/flv"}]
  }
});

期末總結(jié)：
videojs是支持集成第三方插件播放技術(shù)，它默認(rèn)是支持html5和flash兩種技術(shù)方式，而videojs-flv其實是給videojs注冊了一個針對flv格式的解析技術(shù)。

接下來我們看一下videojs-flv的源碼


image.png

首先他從全局環(huán)境獲取到了videojs的全局函數(shù)


image.png

image.png

所以官網(wǎng)才會說是通過flvjs技術(shù)去播放flv格式文件，不過官網(wǎng)只給出了通過videojs初始化單段的案例也就是場景一（單段）的案例，并沒有給出結(jié)合之后如何初始化多段分段播放的例子，這里著實踩了不少坑。遇到這種情況，首先通過源碼能夠鎖定大方向沒錯，只要flv能支持的功能，結(jié)合之后videojs肯定也是支持的，不需要猶豫，其次官方?jīng)]有給出詳細(xì)案例的情況，需要我們大膽的去嘗試和驗證。其實最后多段的實現(xiàn)案例中，source中對象的src為-1并沒有任何意義，但是一定得有內(nèi)容，不能為空字符串。關(guān)鍵一點，type必須指定video/flv格式，這是和用flvjs去初始化多段分段的案例中不同的地方。

至此，通過videojs-flvjs將videojs和flvjs兩個庫進行了一個融合，達到了功能清單中所有的功能在一個播放器實現(xiàn)的技術(shù)需求。
最終采用的直播方式為：HLS提供 的m3u8視頻直播流，及flv格式多段錄播文件流。期間定制化了播放器控制欄組件，下一章預(yù)備分享，定制化videojs控制欄組件開發(fā)。敬請期待。。。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容