flvplayer

    1.1.8 • Public • Published

    FlvPlayer

    Build Status version license size npm Downloads PRs Welcome dependencies Status

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

    Demo

    Checkout the demo from Github Pages

    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

    QQ Group

    QQ Group

    License

    MIT © Harvey Zack

    Install

    npm i flvplayer

    DownloadsWeekly Downloads

    14

    Version

    1.1.8

    License

    MIT

    Unpacked Size

    4.51 MB

    Total Files

    62

    Last publish

    Collaborators

    • avatar