FlvPlayer.js is a JavaScript player for decode flv to the canvas
Checkout the demo from Github Pages
Install with npm
$ npm install flvplayer
Or install with yarn
$ yarn add flvplayer
import 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.css';
import 'path/to/flvplayer-control.js';
Or umd builds are also available
<link rel="stylesheet" href="path/to/flvplayer-control.css" />
<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: '',
// 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,
// Segment decoding size, with reduced memory usage, the default is 1M
chunkSize: 1024 * 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,
// Maximum limit for cached data in live mode, unit is byte, the default is 64M
freeMemory: 64 * 1024 * 1024,
// 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.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.
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 install
Run the developer mode
$ npm run dev
Open web server
$ npm start
MIT © Harvey Zack