FlvPlayer

FlvPlayer.js is a JavaScript player for decode flv to the canvas

Homepage

https://flvplayer.js.org

Mobile Demo

Install player

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.

Install control(optional)

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.

Usage

<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');
}

Question

Q: What is the difference between flvplayer-decoder-baseline.js and flvplayer-decoder-multiple.js.

• flvplayer-decoder-baseline.js only supports flv in this Baseline profile, only 200k size.
• flvplayer-decoder-multiple.js supports flv in this Baseline、Main、Extended and High profile, but have 2M size.

API

Instance methods and properties

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;

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.on('play', function () {
    console.log('Video is play!');
});

Class methods and properties

Get all instances:

FlvPlayer.instances;

Check if support:

FlvPlayer.isSupported;

Get the version:

FlvPlayer.version;

Get the env:

FlvPlayer.env;

Contribution

Installation dependency

$ npm install

Run the developer mode

$ npm run dev

Open web server

$ npm start

Donations

We accept donations through these channels:

• Patreon
• Paypal

QQ Group

License

MIT © Harvey Zack