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:

zhw2590582/FlvPlayer

zhw2590582

Reviews

Repository Details