Awesome Open Source
Awesome Open Source

FlvPlayer

Build Status version license size npm Downloads PRs Welcome dependencies Status

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

Homepage

https://flvplayer.js.org

Mobile Demo

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 BaselineMainExtended 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:

pay

QQ Group

QQ Group

License

MIT © Harvey Zack


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,958
video (890
webgl (414
canvas (379
webassembly (367
player (249
aac (46
h264 (43
worker (38
flv (28