Explication détaillée de l'utilisation de flv.js-js tutoriel-php.cn

Explication détaillée de l'utilisation de flv.js

php中世界最好的语言

Libérer： 2018-03-10 16:12:23

original

5990 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de flv.js. Quelles sont les précautions lors de l'utilisation de flv.js. Voici des cas pratiques, jetons un coup d'œil.

Bilibili pense que tout le monde le connaît, et Flv.js est le lecteur de vidéo Flash HTML5 (FLV) open source du site bilibili, purement natif JavaScript développé (écrit par ECMAScript 6 ), aucun Flash n'est utilisé.
Son principe de fonctionnement est que Flv.js analyse le flux de fichiers flv en JavaScript, l'encapsule dans fmp4 en temps réel et le transmet au navigateur via Media Source Extensions, réalisant ainsi la lecture de vidéos au format FLV.
github

Si vous avez installé nodejs, vous pouvez utiliser npm pour installer flv.js
Il est recommandé d'utiliser cnpm pour installer
Bien sûr, vous pouvez également utiliser d'autres méthodes pour télécharger
Après le téléchargement, recherchez le flv.min.js dans le dossier dist et copiez-le

Vous pouvez utiliser un simple test de serveur

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>

Copier après la connexion

Je crois Si vous lisez cet article, vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser s-xlsx pour importer et exporter des fichiers Excel

Comment utiliser JavaScript pour enregistrer les données texte

Téléchargement du point d'arrêt segmenté du fichier du navigateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!