Heim >Web-Frontend >H5-Tutorial >Anleitung zur Verwendung des Open-Source-Codes flv.js

Anleitung zur Verwendung des Open-Source-Codes flv.js

阿神Original: 2018-05-24 11:11:5617978Durchsuche

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.

Funktion:

Das Obige ist die offizielle Einführung. Der entscheidende Punkt ist, dass Open Source uns die Verwendung ermöglicht, vielen Dank an die Meister von Bilibili Wir

Das Folgende ist der integrierte Nutzungsplan, den ich zusammengestellt habe

1. Einsatzplan

1. Voraussetzung

Zuallererst werden hier Nodejs und NPM verwendet. In meinem vorherigen Artikel werde ich nicht näher darauf eingehen für sie, wenn Sie sie brauchen.

2. Code herunterladen

Github-Adresse: https://github.com/Bilibili/flv.js

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 es in D:codeflv.js-master eingefügt

3. Erstellen Sie den Code

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

1) Öffnen Sie zunächst das cmd-Befehlszeilenfenster ( denken Sie daran, zum Öffnen hier mit der rechten Maustaste zu klicken und als Administrator ausführen (Wo der Code ist, lege ich ihn auf D:codeflv.js-master

2) Führen Sie npm aus Build, hier ist der Prozess Installation der Entwicklungsumgebung

Nachdem Sie auf den Abschluss der Ausführung gewartet haben, erscheint das folgende Bild

npm install

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

3）安装生成工具

npm install -g gulp

4）包装和最小化JS放在dist文件夹里

gulp release

然后D:\code\flv.js-master\dist里就终于得到我们需要flv.js和flv.min.js代码了

flv.js压缩前代码

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?1.1.9"></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>

结果

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

如何看待B站 (bilibili) 开源 HTML5 播放器内核 flv.js?

全面解读flv.js代码

Das obige ist der detaillierte Inhalt vonAnleitung zur Verwendung des Open-Source-Codes flv.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Fallanalyse neuartiger interaktiver HTML5-Formulare (technische Analyse) (Bild)Nächster Artikel：Eine kurze Fallanalyse neuartiger interaktiver HTML5-Formulare (technische Analyse) (Bild)

In Verbindung stehende Artikel

Mehr sehen