FlvPlayer
FlvPlayer.js is a JavaScript player for decode flv to the canvas
Demo
Checkout the demo from Github Pages
Mobile Demo
Install player
Install with npm
$ npm install flvplayer
Or install with yarn
$ yarn add flvplayer
;
Or umd builds are also available
Will expose the global variable to window.FlvPlayer
.
Install control(optional)
You should load the control before load the player.
;
Or umd builds are also available
Will expose the global variable to window.FlvplayerControl
.
Usage
if FlvPlayer var flv = // Accept http url, websocket url, and file type url: '' // Accept dom element, dom selector container: '' // Video poster url poster: '' // Whether to print debug information debug: false // Whether live mode live: false // Whether the video loops, in non-live mode loop: false // Whether to use hotkeys, if the control exists hotkey: true // Whether to turn off the volume muted: false // On the mobile side, try to activate the audio after the user touches the screen. touchResume: true // Video chunk size, the default is 1M videoChunk: 1024 * 1024 // Audio chunk size, the default is 16kb audioChunk: 16 * 1024 // Whether to play automatically autoPlay: false // Whether it contains an audio stream hasAudio: true // Whether to cache the video frame to play cache: true // Maximum time difference between audio and video, unit is ms // used to automatically adjust audio and video synchronization maxTimeDiff: 200 // Whether to display the control, if the control exists control: true // Indicates whether to do http fetching with cookies withCredentials: true // Indicates total file size of media file, in bytes filesize: Infinity // Indicates whether to enable CORS for http fetching cors: true // Volume from 0 to 1, the default is 0.7 volume: 07 // Initialize the frame rate, which will be covered by the actual frame rate of the file frameRate: 30 // Initialize the width, which will be covered by the actual width of the file width: 400 // Initialize the height, which will be covered by the actual height of the file height: 300 // Initialize http headers headers: {} // The path of the video decoder, currently optional flvplayer-decoder-baseline.js and flvplayer-decoder-multiple.js decoder: 'flvplayer-decoder-baseline.js' ; else console;
Question
Q: What is the difference between flvplayer-decoder-baseline.js
and flvplayer-decoder-multiple.js
.
flvplayer-decoder-baseline.js
only supports flv in thisBaseline
profile, only 200k size.flvplayer-decoder-multiple.js
supports flv in thisBaseline
、Main
、Extended
andHigh
profile, but have 2M size.
API
Instance methods and properties
Play video:
flv;
Pause video:
flv;
Switch whether to play:
flv;
Destroy instance:
flv;
Whether it is playing:
flvplaying;
Is the stream being pulled:
flvstreaming;
Get the current time of the video:
flvcurrentTime;
Get the duration of the video:
flvduration;
Get the loaded of the video:
flvloaded;
Whether it is focus:
flvisFocus;
Set whether to turn off the volume:
flvmuted;
Set the volume:
flvvolume;
Get canvas elements:
flv$canvas;
Instance event
Name | Description |
---|---|
destroy |
When destroying an instance |
streamStart |
Start pulling the stream |
streaming |
When pulling stream |
streamEnd |
At the end of the pull stream |
demuxDone |
Demux completed |
resize |
When container resize |
play |
When video play |
timeupdate |
When video timeupdate |
waiting |
When video waiting |
ended |
When video ended |
loop |
When video loop |
pause |
When video pause |
seeked |
When video seeked |
ready |
When video ready |
streamRate |
Stream Rate |
demuxRate |
Demux Rate |
decoderRate |
Decoder Rate |
drawRate |
Draw Rate |
Example:
flv;
Class methods and properties
Get all instances:
FlvPlayerinstances;
Check if support:
FlvPlayerisSupported;
Get the version:
FlvPlayerversion;
Get the env:
FlvPlayerenv;
Contribution
Installation dependency
$ npm install
Run the developer mode
$ npm run dev
Open web server
$ npm start
QQ Group
License
MIT © Harvey Zack