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

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

QQ Group

License

MIT © Harvey Zack