FlvPlayer

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

Attention

H264 decoder comes from h264bsd/tinyh264, currently only supports flv of Baseline Profile.
In theory, it can be played on the mobile side, but there are still many compatibility problems, please do not use it in the production environment.

Demo

Play online demo

Play local demo

Install

Install with npm

$ npm install flvplayer

Or install with yarn

$ yarn add flvplayer

import FlvPlayer from 'flvplayer';
import 'flvplayer/dist/flvplayer.css';

Or umd builds are also available

<link rel="stylesheet" href="path/to/flvplayer.css" />
<script src="path/to/flvplayer.js"></script>

Will expose the global variable to window.FlvPlayer.

Usage

<div class="flvplayer-app"></div>

var flv = new FlvPlayer({
    container: '.flvplayer-app', // A div dom element
    url: 'path/to/video.flv', // Url of flv video file
    poster: 'path/to/poster.png', // Url of video poster, the first frame of the video is taken as the poster by default
    debug: false, // Show debug information on developer tools
    live: false, // Whether live video
    loop: false, // Whether to automatically loop play
    hotkey: true, // Whether to use hotkeys
    controls: true, // Whether to display the controller
    hasAudio: true, // Whether to include audio
    volume: 7, // Default volume, ranging from 0 to 10
    frameRate: 30, // Video frame rate, which will be extracted from the flv file by default
    width: 400, // Video default width, which will be extracted from the flv file by default
    height: 300, // Video default height, which will be extracted from the flv file by default
});