FlvPlayer.js is a JavaScript player for decode flv to the canvas
Install with npm
$ npm install flvplayerOr install with yarn
$ yarn add flvplayerimport FlvPlayer from 'flvplayer';Or umd builds are also available
<script src="path/to/flvplayer.js"></script>Will expose the global variable to window.FlvPlayer.
You should load the control before load the player.
import 'path/to/flvplayer-control.js';Or umd builds are also available
<script src="path/to/flvplayer-control.js"></script>Will expose the global variable to window.FlvplayerControl.
<div class="flvplayer-app"></div>if (FlvPlayer.isSupported()) {
var flv = new FlvPlayer({
// 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: 0.7,
// 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.warn('Your browser does not support Flvplayer.js');
}Q: What is the difference between flvplayer-decoder-baseline.js and flvplayer-decoder-multiple.js.
flvplayer-decoder-baseline.jsonly supports flv in thisBaselineprofile, only 200k size.flvplayer-decoder-multiple.jssupports flv in thisBaseline、Main、ExtendedandHighprofile, but have 2M size.
Play video:
flv.play();Pause video:
flv.pause();Switch whether to play:
flv.toggle();Destroy instance:
flv.destroy();Whether it is playing:
flv.playing;Is the stream being pulled:
flv.streaming;Get the current time of the video:
flv.currentTime;Get the duration of the video:
flv.duration;Get the loaded of the video:
flv.loaded;Whether it is focus:
flv.isFocus;Set whether to turn off the volume:
flv.muted;Set the volume:
flv.volume;Get canvas elements:
flv.$canvas;| 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.on('play', function () {
console.log('Video is play!');
});Get all instances:
FlvPlayer.instances;Check if support:
FlvPlayer.isSupported;Get the version:
FlvPlayer.version;Get the env:
FlvPlayer.env;Installation dependency
$ npm installRun the developer mode
$ npm run devOpen web server
$ npm startWe accept donations through these channels:
MIT © Harvey Zack
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent