1. 程式人生 > >B 站 HTML5 播放器核心 Flv.js

B 站 HTML5 播放器核心 Flv.js

Flv.js 是 HTML5 Flash 視訊(FLV)播放器,純原生 JavaScript 開發,沒有用到 Flash。由 bilibili 網站開源。

概覽:

一個實現了在 HTML5 視訊中播放 FLV 格式視訊的 JavaScript 庫。它的工作原理是將 FLV 檔案流轉碼複用成 ISO BMFF(MP4 碎片)片段,然後通過 Media Source Extensions 將 MP4 片段喂進瀏覽器。

flv.js 是使用 ECMAScript 6 編寫的,然後通過 Babel Compiler 編譯成 ECMAScript 5,使用 Browserify 打包。

功能:


  • FLV 容器,具有 H.264 + AAC 編解碼器播放功能

  • 多部分分段視訊播放

  • HTTP FLV 低延遲實時流播放

  • FLV 通過 WebSocket 實時流播放

  • 相容 Chrome, FireFox, Safari 10, IE11 和 Edge

  • 十分低開銷,並且通過你的瀏覽器進行硬體加速

  • 用法:

  • <script src="flv.min.js"></script>
    <video id="videoElement"></video>
    <script>
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: 'http://example.com/flv/video.flv'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
    注:如果使用的是獨立的視訊伺服器,那麼視訊伺服器的“Access-Control-Allow-Origin”這一項需要配置正確。

參考:https://www.oschina.net/p/flv-js
原始碼地址:https://github.com/Bilibili/flv.js