Detaillierte Erläuterung der Verwendung von flv.js-js-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung von flv.js

php中世界最好的语言

Freigeben： 2018-03-10 16:12:23

Original

6038 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen ausführlich, welche Vorsichtsmaßnahmen bei der Verwendung von flv.js zu beachten sind. Schauen wir uns die folgenden praktischen Fälle an.

Bilibili glaubt, dass jeder damit vertraut ist, und Flv.js ist der Open-Source-HTML5-Flash-Video-Player (FLV) von der Bilibili-Website, rein nativ

JavaScript entwickelt (geschrieben von ECMAScript 6). ), wird kein Flash verwendet. Sein Arbeitsprinzip besteht darin, dass Flv.js den FLV-Dateistream in JavaScript analysiert, ihn in Echtzeit in fmp4 kapselt und ihn über Media Source Extensions an den Browser weiterleitet, wodurch die Wiedergabe von Videos im FLV-Format realisiert wird.
github

Wenn Sie nodejs installiert haben, können Sie npm verwenden, um flv.js zu installieren

Es wird empfohlen, cnpm zum Installieren zu verwenden
Natürlich können Sie auch andere Methoden zum Herunterladen verwenden
Suchen Sie nach dem Herunterladen die Datei flv.min.js im dist-Ordner und kopieren Sie sie

Sie können einen einfachen Servertest verwenden

Code:

<!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>

Nach dem Login kopieren

Ich glaube Sie haben diesen Artikel gelesen. Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie s-xlsx zum Importieren und Exportieren von Excel-Dateien

So verwenden Sie JavaScript dazu Textdaten speichern

Segmentierter Haltepunkt-Upload der Browserdatei

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von flv.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!