flv.js簡單使用示例

關愛單身狗發表於2016-12-25
JS

Bilibili相信大家都不會陌生，而 Flv.js 就是由 bilibili 網站開源的 HTML5 Flash 視訊（FLV）播放器，純原生 JavaScript 開發（ECMAScript 6 編寫） ，沒有用到 Flash。
它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 檔案流，並實時轉封裝為 fmp4 ，通過 Media Source Extensions 餵給瀏覽器，實現了 FLV 格式視訊的播放。
github

如果你已經安裝了nodejs可以使用 npm來安裝 flv.js
推薦使用cnpm 來安裝
當然你也可以使用其他方式進行下載
在下載好的資料夾中找到dist資料夾中的flv.min.js複製出來

可以使用簡單的伺服器測試

程式碼：

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>
    <style>
        .mainContainer {
    display: block;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.urlInput {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

.centeredVideo {
    display: block;
    width: 100%;
    height: 576px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
}

.controls {
    display: block;
    width: 100%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
    </style>
</head>

<body>
    <div class="mainContainer">
        <video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn`t support HTML5 video.</video>
    </div>
    <br>
    <div class="controls">
        <!--<button onclick="flv_load()">載入</button>-->
        <button onclick="flv_start()">開始</button>
        <button onclick="flv_pause()">暫停</button>
        <button onclick="flv_destroy()">停止</button>
        <input style="width:100px" type="text" name="seekpoint" />
        <button onclick="flv_seekto()">跳轉</button>
    </div>
    <script src="flv.min.js"></script>
    <script>
        var player = document.getElementById(`videoElement`);
        if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: `flv`,
                url: `你的視訊.flv`
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //載入
        }

        function flv_start() {
            player.play();
        }

        function flv_pause() {
            player.pause();
        }

        function flv_destroy() {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }

        function flv_seekto() {
            player.currentTime = parseFloat(document.getElementsByName(`seekpoint`)[0].value);
        }
    </script>
</body>

</html>

相關文章 使用flv.js實現播放視訊直播示例


相關文章