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

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:

FLV container with H.264 + AAC codec playback function
Multi-part segmented video playback
HTTP FLV low-latency live streaming playback
FLV live streaming playback via WebSocket
Compatible with Chrome, FireFox, Safari 10, IE11 and Edge
Very low overhead and hardware accelerated through your browser

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页面

    
    

    




    
    

        
        
        

        

            Load
            Start
            Pause
            Destroy
            
            SeekTo
        
    


    
    
    
    

结果

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!