Home > Article > Web Front-end > Use flv.js and video.js to create a live video effect

Use flv.js and video.js to create a live video effect

php中世界最好的语言Original: 2018-03-12 15:16:426651browse

This time I will bring you the effect of using flv.js and video.js to create a live video broadcast. What are the precautions of using flv.js and video.js to create the effect of live video. The following are Let’s take a look at practical cases.

Environment configuration

First run livego

Use flv.js and video.js to create a live video effect

##Install and run OBS

Use flv.js and video.js to create a live video effect

Open the settings and configure the streaming server

Use flv.js and video.js to create a live video effect

Livego will prompt after the connection is successful

Use flv.js and video.js to create a live video effect

Prompt to load the source

Use flv.js and video.js to create a live video effect ##Enter the html directory under nginx and create a new Index1.html and index2.html

Then run nginx (modify the nginx port before running)

2. Use flv.js to implement live broadcast

I have written the tutorial "flv" before .js is simple

Usage example

》Slightly modify the previous code
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>

Visit http://127.0.0.1/index1.html

If the browser starts playing the video, it means you have succeeded

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the PHP Chinese website!

Use flv.js and video.js to create a live video effect

Related articles