xgplayer-flv
FLV plugin provided by xgplayer makes it possible to play video in FLV format without Flash
xgplayer-flv
Install
npm i xgplayer@version --save
npm i xgplayer-flv@version --save
import Player from 'xgplayer'
import FlvPlayer from 'xgplayer-flv'
CDN
<link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/@version/dist/index.min.css"/>
<script src="https://unpkg.byted-static.com/xgplayer/@version/dist/index.min.js"></script>
<script src="https://unpkg.byted-static.com/xgplayer-flv/@version/dist/index.min.js"></script>
Usage
const player = new Player({
id: 'vs',
plugins: [FlvPlayer],
url: 'index.flv',
isLive: true | false,
flv:{
loadTimeout: 10000,
preloadTime: 4,
retryCount: 2,
retryDelay: 1000
}
});
Config
Config of plugin specialized passed by flv:{} when init player
xgplayer-flv
| Name | Description | Default value |
|---|---|---|
retryCount | Max retry number for network error by millisecond | 3(s) |
retryDelay | Time between every single retry action by second | 0(ms) |
loadTimeout | Max waiting time for loading flv stream by millisecond | 10000(ms) |
seiOnDemand | if emit sei info follow by currentTime | false |
options | params used by fetch api | {headers:{}, cors: true, withCredentials:false} |
preloadTime | Target buffer size for anti-jitter by second | 5(s) |
options
| Name | Description |
|---|---|
| options.headers | request header append to fetch |
| options.cors | cors mode |
| options.withCredentials | is request with credentials |
Api
| function |
|---|
| pause() |
| play() |
| replay() |
| switchURL(url), player.src = url |
Events
For flvplayer、hlsplayer, we provide a series of core event, which exposing essential information for you to monitor and report
player.on('{coreEvent}', coreInfo=>{
})
Structure of coreInfo:
| Name | Type | Description |
|---|---|---|
| eventName | string | Name of core event |
| ... | - | other properties depend on event name |
Provided Core Events
core.ttfb
Cost of first frame
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
| start | number | Request start time |
| end | number | Request end time |
| url | string | Request URL |
| elapsed | number | Cost by ms |
core.loadstart
Starting for load stream
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
| url | string | Requst URL |
core.loadresponseheaders
Response headers
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
| headers | Headers | Same with Response.header |
core.loadcomplete
Load Complete
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
core.loadretry
Retry for loading stream
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
| reason | string | Previous request failed reason |
| retryTime | number | Retry count |
| error | {code, message} | Error from previous request |
core.keyframe
Raw pts from parsed keyframe
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
| pts | number | Persent time stamp of keyframe |
core.metadataparsed
Metadata of video tracks
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
| type | "video" or "audio" | metadata type |
| meta | object | Metadata object |
core.remuxmetadata
Metadata was remuxed by player
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
| type | "video" | "audio" |
core.bufferappend
Remuxed buffer appended to MediaSource
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
core.seiparsed
SEI Nal parsed
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
| sei | {code:number, content: Uint8Array, dts:number} | SEI details |
core.lowdecode
For WASM playback, decode speed is lower than video FPS
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
| fps | number | |
| decodeFps | number | Decode speed by fps |
| bitrate | number | Video bitrate (bps) |
| url | number | Playback url |
| msg (optional) | string | Decode error message |
core.largeavgap
Video dts was distant from audio’s, may cause avunsync
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
core.streamexception
Unexpected stream expection, for example: frame lossed、dts stepback
| Name | Type | Description |
|---|---|---|
| eventName | string | -- |
| type | string | Exception message |
| info | object | Detail info |
core.streamexception
| type | Message |
|---|---|
| LARGE_AV_FIRST_FRAME_GAP_DETECT | Large gap between audio and video was detected, may causes avunsync |
| LARGE_VIDEO_DTS_GAP_DETECT | Video dts discontiune detected |
| LARGE_AUDIO_DTS_GAP_DETECT | Audio dts discontiune detected |
| AUDIO_GAP_DETECT | Player fix audio gap by filling silence frames in |
| AUDIO_OVERLAP_DETECT | Player fix audio gap by dropping overlaped frames |
| VIDEO_DISCONTINUE_DETECT | Discontinue m3u8 tag found |
| MAX_DTS_DELTA_WITH_NEXT_SEGMENT_DETECT | Large dts gap between m3u8 ts fragments found |