Home >Web Front-end >JS Tutorial >What is flv.js? How to use flv.js?

What is flv.js? How to use flv.js?

PHPzOriginal: 2018-05-18 17:00:0710918browse

What is Flv.js?

is an HTML5 Flash video (FLV) player, developed purely with native JavaScript and does not use Flash. Open sourced by bilibili website.

Overview:

A JavaScript library that implements playing FLV format videos in HTML5 videos. Its working principle is to transcode and multiplex the FLV file stream into ISO BMFF (MP4 fragments) fragments, and then pass them through Media Source Extensions feed MP4 clips into the browser. flv.js is written in ECMAScript 6, then compiled into ECMAScript 5 through Babel Compiler, and packaged using Browserify.

Features:

The above is the official introduction. The key point is that open source allows us to use it. Thank you to the masters of Station B

##The following is the integrated usage plan I compiled

How to use flv.js?

1. Deployment plan

1 , Premise

First of all, nodejs and npm must be used here. How to install and deploy them has been written in my previous article. No more details here. If you want, you can read the complete installation process of nodejs and the installation of npm module plug-ins (the pictures and texts include the pits that have been stepped on)】2. Download code

Students who need to synchronize the latest code must use git. If you don’t have git, you can also download the zip file

#After downloading the code

I put it in D:\code\flv.js-master

##3. Build code

Because the code cannot be used directly, we need to use the npm module of nodejs to build

1) First open the cmd command line window (Remember to right-click here to open and run as administrator), otherwise an error may occur

cd command to the place where the code is placed. I put it in D:\code \flv.js-master

##2) Execute npm build, here is the operation to install the development environment

npm install

After waiting for the execution to complete, the following picture will appear

#D:\code\flv.js-masterThere will be one more node_modules folder

#3 ) Install the generation tool

npm install -g gulp

4) Package and minimize JS in the dist folder

gulp release

Then we finally get the flv.js and flv.min.js codes we need in D:\code\flv.js-master\dist

flv.jsCode before compression

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"></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部署，视频找个位置就可以了，主要是记住位置。

The above is the detailed content of What is flv.js? How to use flv.js?. For more information, please follow other related articles on the PHP Chinese website!

Java JavaScript tomcat html5 firefox chrome safari ecmascript html npm edge JS git http websocket

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Simple understanding of jsonNext article：Simple understanding of json

See more

What is flv.js? How to use flv.js?

Related articles