Was ist flv.js? Wie verwende ich flv.js?-js-Tutorial-php.cn

Was ist flv.js? Wie verwende ich flv.js?

PHPz

Freigeben： 2018-05-18 17:00:07

Original

10915 Leute haben es durchsucht

Was ist Flv.js?

ist ein HTML5-Flash-Video-Player (FLV), der ausschließlich mit nativem JavaScript ohne Verwendung von Flash entwickelt wurde. Open Source von der Bilibili-Website.

Übersicht:

Eine JavaScript-Bibliothek, die die Wiedergabe von Videos im FLV-Format in HTML5-Videos implementiert. Dabei wird der FLV-Dateistream in ISO-BMFF-Fragmente (MP4-Fragmente) transkodiert und gemultiplext und anschließend über Medien weitergeleitet Quellerweiterungen speisen MP4-Clips in den Browser ein. flv.js wird in ECMAScript 6 geschrieben, dann über Babel Compiler in ECMAScript 5 kompiliert und mit Browserify gepackt.

Eigenschaften:

Das Obige ist die offizielle Einführung. Der entscheidende Punkt ist, dass Open Source es uns ermöglicht, es zu verwenden.

Das Folgende ist der integrierte Nutzungsplan, den ich zusammengestellt habe

Wie verwende ich flv.js?

1. Bereitstellungsplan

1 , Voraussetzung

Zunächst müssen NodeJS und NPM verwendet werden. Hier wurde beschrieben, wie sie installiert und bereitgestellt werden In meinem vorherigen Artikel finden Sie hier keine weiteren Details. Wenn Sie möchten, können Sie [Der vollständige Installationsprozess von NodeJS und die Installation von NPM-Modul-Plug-Ins lesen (die Bilder und Texte enthalten Fallstricke, auf die getreten wurde). )]

2. Code herunterladen

Studenten, die den neuesten Code synchronisieren müssen, sollten Git verwenden. Wer kein Git hat, kann auch die Zip-Datei herunterladen

Nach dem Herunterladen des Codes

Ich habe ihn in D:codeflv.js-master

3. Code erstellen

Da der Code nicht direkt verwendet werden kann, müssen wir zum Erstellen das npm-Modul von nodejs verwenden

1) Öffnen Sie zunächst das cmd-Befehlszeilenfenster (Denken Sie daran, hier mit der rechten Maustaste zu klicken, um es zu öffnen und als Administrator auszuführen ), andernfalls kann ein Fehler auftreten

cd-Befehl an die Stelle, an der der Code platziert wird , ich habe es in D:codeflv.js-master auf

2) Führen Sie den NPM-Build aus. Hier ist der zu installierende Vorgang die Entwicklungsumgebung

npm install

Nach dem Login kopieren

Nachdem Sie auf den Abschluss der Ausführung gewartet haben, Es erscheint folgendes Bild

D:codeflv.js-master wird einen zusätzlichen Ordner node_modules haben

3) Installieren Sie das Generierungstool

npm install -g gulp

Nach dem Login kopieren

4) JS im dist-Ordner verpacken und minimieren

gulp release

Nach dem Login kopieren

Dann bekommen wir in D:codeflv.js-masterdist endlich die flv.js- und flv.min.js-Codes, die wir brauchen

flv.jsVorkomprimierungscode

flv.min.js压缩后代码

二、整合方案

代码DEMO-html页面

<!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>
    
    <p class="mainContainer">
        <input name="urlinput" class="urlInput" type="text" value="http://localhost/Test/test1.mp4"/>
        <video name="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">
            Your browser is too old which doesn&#39;t support HTML5 video.
        </video>
        <br>
        <p class="controls">
            <button onclick="flv_load()">Load</button>
            <button onclick="flv_start()">Start</button>
            <button onclick="flv_pause()">Pause</button>
            <button onclick="flv_destroy()">Destroy</button>
            <input style="width:100px" type="text" name="seekpoint"/>
            <button onclick="flv_seekto()">SeekTo</button>
        </p>
    </p>

    <script src="flv.min.js"></script>
    
    <script>
        function flv_load() {
            console.log(&#39;isSupported: &#39; + flvjs.isSupported());
            var urlinput = document.getElementsByName(&#39;urlinput&#39;)[0];
            var xhr = new XMLHttpRequest();
            xhr.open(&#39;GET&#39;, urlinput.value, true);
            xhr.onload = function (e) {
                var player;
                var element = document.getElementsByName(&#39;videoElement&#39;)[0];
                if (typeof player !== "undefined") {
                    if (player != null) {
                        player.unload();
                        player.detachMediaElement();
                        player.destroy();
                        player = null;
                    }
                }
              
                player = flvjs.createPlayer({
                    type: &#39;mp4&#39;,
                    url: urlinput.value
                });
                player.attachMediaElement(element);
                player.load();
            }
            xhr.send();
        }

        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() {
            var input = document.getElementsByName(&#39;seekpoint&#39;)[0];
            player.currentTime = parseFloat(input.value);
        }

        function getUrlParam(key, defaultValue) {
            var pageUrl = window.location.search.substring(1);
            var pairs = pageUrl.split(&#39;&&#39;);
            for (var i = 0; i < pairs.length; i++) {
                var keyAndValue = pairs[i].split(&#39;=&#39;);
                if (keyAndValue[0] === key) {
                    return keyAndValue[1];
                }
            }
            return defaultValue;
        }

        var urlInputBox = document.getElementsByName(&#39;urlinput&#39;)[0];
        var url = decodeURIComponent(getUrlParam(&#39;src&#39;, urlInputBox.value));
        urlInputBox.value = url;
        
        document.addEventListener(&#39;DOMContentLoaded&#39;, function () {
            flv_load();
        });
    </script>
    
</body>

</html>

Nach dem Login kopieren

结果

Ps：视频要放在服务器上，这里我用的是Java Web项目，tomcat部署，视频找个位置就可以了，主要是记住位置。

Das obige ist der detaillierte Inhalt vonWas ist flv.js? Wie verwende ich flv.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!