recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de l'utilisation de flv.js

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

php中世界最好的语言
php中世界最好的语言original
2018-03-10 16:12:235981parcourir

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js implémentation du partage d'exemple de compte à rebours du code de vérification SMSArticle suivant：js implémentation du partage d'exemple de compte à rebours du code de vérification SMS

Articles Liés

Voir plus