Utilisez flv.js et video.js pour créer un effet vidéo en direct-js tutoriel-php.cn

Utilisez flv.js et video.js pour créer un effet vidéo en direct

php中世界最好的语言

Libérer： 2018-03-12 15:16:42

original

6661 Les gens l'ont consulté

Cette fois, je vais vous présenter l'effet de l'utilisation de flv.js et video.js pour créer une diffusion vidéo en direct. Quelles sont les précautions concernant l'utilisation de flv.js et video.js pour créer l'effet. de diffusion vidéo en direct. Voici quelques exemples de cas pratiques.

Configuration de l'environnement

Première exécution de livego

Utilisez flv.js et video.js pour créer un effet vidéo en direct

Installer et exécuter OBS

Utilisez flv.js et video.js pour créer un effet vidéo en direct

Ouvrez les paramètres et configurez le serveur de streaming

Utilisez flv.js et video.js pour créer un effet vidéo en direct

Livego vous demandera une fois la connexion réussie

Utilisez flv.js et video.js pour créer un effet vidéo en direct

Invite à charger la source

Utilisez flv.js et video.js pour créer un effet vidéo en direct

Entrez le répertoire HTML sous nginx et créez un nouveau Index1.html et index2.html
, puis exécutez nginx (modifiez le port nginx avant d'exécuter)

2 Utilisez flv.js pour implémenter la diffusion en direct

. J'ai écrit le tutoriel "flv" avant que .js soit simpleExemple d'utilisation》
Modifier légèrement le code précédent

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.js/flv.min.js"></script>
    <script>
        var player = document.getElementById(&#39;videoElement&#39;);        if (flvjs.isSupported()) {            var flvPlayer = flvjs.createPlayer({                type: &#39;flv&#39;,                "isLive": true,//<====加个这个 
                url: &#39;http://127.0.0.1:7001/live/movie/a.flv&#39;,//<==自行修改
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //加载
            flv_start();
        }        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

Visitez http : //127.0.0.1/index1.html

Si le navigateur démarre la lecture de la vidéo, cela signifie que vous avez réussi

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture connexe :

Comment utiliser la toile pour créer une planche à dessin de graffitis utile

Comment utiliser s-xlsx fusionner la cellule

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!