https://github.com/zhw2590582/FlvPlayer
:lollipop: FlvPlayer.js is a JavaScript player for decode flv to the canvas
https://github.com/zhw2590582/FlvPlayer
aac audiocontext canvas flv h264 http-flv player video webassembly webgl websocket-flv worker
Last synced: 11 months ago
JSON representation
:lollipop: FlvPlayer.js is a JavaScript player for decode flv to the canvas
- Host: GitHub
- URL: https://github.com/zhw2590582/FlvPlayer
- Owner: zhw2590582
- License: mit
- Archived: true
- Created: 2019-05-09T08:09:47.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-11-21T10:39:44.000Z (over 4 years ago)
- Last Synced: 2024-11-24T23:16:20.722Z (over 1 year ago)
- Topics: aac, audiocontext, canvas, flv, h264, http-flv, player, video, webassembly, webgl, websocket-flv, worker
- Language: JavaScript
- Homepage: https://flvplayer.js.org
- Size: 14.5 MB
- Stars: 307
- Watchers: 11
- Forks: 83
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FlvPlayer
[](https://www.travis-ci.org/zhw2590582/FlvPlayer)
[](https://www.npmjs.com/package/flvplayer)
[](http://makeapullrequest.com)
[](https://david-dm.org/zhw2590582/flvplayer)
> FlvPlayer.js is a JavaScript player for decode flv to the canvas
## Homepage
[https://flvplayer.js.org](https://flvplayer.js.org)
## Mobile Demo
## Install player
Install with `npm`
```bash
$ npm install flvplayer
```
Or install with `yarn`
```bash
$ yarn add flvplayer
```
```js
import FlvPlayer from 'flvplayer';
```
Or umd builds are also available
```html
```
Will expose the global variable to `window.FlvPlayer`.
## Install control(optional)
You should load the control before load the player.
```js
import 'path/to/flvplayer-control.js';
```
Or umd builds are also available
```html
```
Will expose the global variable to `window.FlvplayerControl`.
## Usage
```html
```
```js
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:
```js
flv.play();
```
Pause video:
```js
flv.pause();
```
Switch whether to play:
```js
flv.toggle();
```
Destroy instance:
```js
flv.destroy();
```
Whether it is playing:
```js
flv.playing;
```
Is the stream being pulled:
```js
flv.streaming;
```
Get the current time of the video:
```js
flv.currentTime;
```
Get the duration of the video:
```js
flv.duration;
```
Get the loaded of the video:
```js
flv.loaded;
```
Whether it is focus:
```js
flv.isFocus;
```
Set whether to turn off the volume:
```js
flv.muted;
```
Set the volume:
```js
flv.volume;
```
Get canvas elements:
```js
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:
```js
flv.on('play', function () {
console.log('Video is play!');
});
```
### Class methods and properties
Get all instances:
```js
FlvPlayer.instances;
```
Check if support:
```js
FlvPlayer.isSupported;
```
Get the version:
```js
FlvPlayer.version;
```
Get the env:
```js
FlvPlayer.env;
```
## Contribution
Installation dependency
```bash
$ npm install
```
Run the developer mode
```bash
$ npm run dev
```
Open web server
```bash
$ npm start
```
## Donations
We accept donations through these channels:
- [Patreon](https://www.patreon.com/artplayer)
- [Paypal](https://www.paypal.me/harveyzack)
## QQ Group
## License
MIT © [Harvey Zack](https://sleepy.im/)