Need help with FlvPlayer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

zhw2590582
209 Stars 73 Forks MIT License 332 Commits 5 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 54,857
HTML
html5
React
vtt
325 commits

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


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


Will expose the global variable to

window.FlvplayerControl
.

Usage

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:

pay

QQ Group

QQ Group

License

MIT © Harvey Zack

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.