ホームページ > 記事 > ウェブフロントエンド > flv.jsの使い方を詳しく解説

flv.jsの使い方を詳しく解説

php中世界最好的语言オリジナル: 2018-03-10 16:12:236002ブラウズ

今回は flv.js の使い方について詳しく説明します。flv.js を使用する際の注意点は何ですか?実際の事例を見てみましょう。

Bilibili 誰もがよく知っていると思いますが、Flv.js は、bilibili Web サイトによってオープンソース化されている HTML5 Flash ビデオ (FLV) プレーヤーです。これは純粋にネイティブ

JavaScript で開発され (ECMAScript 6 で書かれています)、Flash は使用しません。。その動作原理は、Flv.js が JavaScript で flv ファイルストリームを解析し、それをリアルタイムで fmp4 にカプセル化し、メディアソース拡張機能を通じてブラウザーにフィードすることで、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の中国語サイトです！