FlvPlayer

by zhw2590582

zhw2590582 / FlvPlayer

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

174 Stars 52 Forks Last release: 4 months ago (1.1.8) MIT License 324 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.