首頁 > web前端 > js教程 > flv.js的使用詳解

flv.js的使用詳解

php中世界最好的语言
發布: 2018-03-10 16:12:23
原創
6038 人瀏覽過

這次帶給大家flv.js的使用詳解,使用flv.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&#39;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(&#39;videoElement&#39;);        if (flvjs.isSupported()) {            var flvPlayer = flvjs.createPlayer({                type: &#39;flv&#39;,                url: &#39;你的视频.flv&#39;
            });
            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(&#39;seekpoint&#39;)[0].value);
        }    </script></body></html>
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

如何使用s-xlsx實作Excel 檔案匯入和匯出

怎麼使用JavaScript儲存文字數據

瀏覽器檔案分段斷點上傳

#

以上是flv.js的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板