西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

xgplayer-hls

HLS playback plugin made by xgplayer team

For VOD m3u8 file: xgplayer-hls-vod

For live stream: xgplayer-hls-live

Install

npm i xgplayer@version --save
npm i xgplayer-hls-vod@version --save
npm i xgplayer-hls-live@version --save

import Player from 'xgplayer'
import HlsVodPlayer from 'xgplayer-hls-vod'
import HlsLivePlayer from 'xgplayer-hls-live'

CDN

<!--引入css-->
<link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/@version/dist/index.min.css"/>
<!--引入js-->
<script src="https://unpkg.byted-static.com/xgplayer/@version/dist/index.min.js"></script>
<script src="https://unpkg.byted-static.com/xgplayer-hls-live/@version/dist/index.min.js"></script>
<script src="https://unpkg.byted-static.com/xgplayer-hls-vod/@version/dist/index.min.js"></script>

Usage

  const player = new Player({
      id: 'vs',
      plugins: [HlsPlayer],
      url: 'index.m3u8',
      hlslive:{
        loadTimeout: 10000,
        retryCount: 2,
        retryDelay: 1000
      }
    });

  const player = new Player({
    id: 'vs',
    plugins: [HlsPlayer],
    url: 'index.m3u8',
    hlsvod:{
      loadTimeout: 10000,
      preloadTime: 60,
        retryCount: 1,
        retryDelay: 1000
    }
  });

Config

Config of plugin specialized passed by hlslive:{}、hlsvod:{} when init player

xgplayer-hls-live

NameDescriptionDefault value
loadTimeoutMax waiting time for loading flv stream by millisecond10000(ms)
retryTimesM3u8 file max refresh count3
retryCountMax retry number for network error3
retryDelayTime between every single retry action by millisecond0(ms)
optionsParams used by fetch api{headers:{}, cors: true, withCredentials:false}

xgplayer-hls-vod

NameDescriptionDefault value
loadTimeoutMax waiting time for loading flv stream by millisecond10000(ms)
preloadTimeMaximum buffer length5(s)
retryTimesM3u8 file max refresh count3
retryCountMax retry number for network error3
retryDelayTime between every single retry action by millisecond0(ms)
optionsparams used by fetch api{headers:{}, cors: true, withCredentials:false}

options

NameDescription
options.headersrequest header append to fetch
options.corscors mode
options.withCredentialsis 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:

NameTypeDescription
eventNamestringName of core event
...-other properties depend on event name

Provided Core Events

core.ttfb

Cost of first frame

NameTypeDescription
eventNamestring--
startnumberRequest start time
endnumberRequest end time
urlstringRequest URL
elapsednumberCost by ms

core.loadstart

Starting for load stream

NameTypeDescription
eventNamestring--
urlstringRequst URL

core.loadresponseheaders

Response headers

NameTypeDescription
eventNamestring--
headersHeadersSame with Response.header

core.loadcomplete

Load Complete

NameTypeDescription
eventNamestring--

core.loadretry

Retry for loading stream

NameTypeDescription
eventNamestring--
reasonstringPrevious request failed reason
retryTimenumberRetry count
error{code, message}Error from previous request

core.keyframe

Raw pts from parsed keyframe

NameTypeDescription
eventNamestring--
ptsnumberPersent time stamp of keyframe

core.metadataparsed

Metadata of video tracks

NameTypeDescription
eventNamestring--
type"video" or "audio"metadata type
metaobjectMetadata object

core.remuxmetadata

Metadata was remuxed by player

NameTypeDescription
eventNamestring--
type"video""audio"

core.bufferappend

Remuxed buffer appended to MediaSource

NameTypeDescription
eventNamestring--

core.seiparsed

SEI Nal parsed

NameTypeDescription
eventNamestring--
sei{code:number, content: Uint8Array, dts:number}SEI details

core.lowdecode

For WASM playback, decode speed is lower than video FPS

NameTypeDescription
eventNamestring--
fpsnumber
decodeFpsnumberDecode speed by fps
bitratenumberVideo bitrate (bps)
urlnumberPlayback url
msg (optional)stringDecode error message

core.largeavgap

Video dts was distant from audio’s, may cause avunsync

NameTypeDescription
eventNamestring--

core.streamexception

Unexpected stream expection, for example: frame lossed、dts stepback

NameTypeDescription
eventNamestring--
typestringException message
infoobjectDetail info

core.streamexception

typeMessage
LARGE_AV_FIRST_FRAME_GAP_DETECTLarge gap between audio and video was detected, may causes avunsync
LARGE_VIDEO_DTS_GAP_DETECTVideo dts discontiune detected
LARGE_AUDIO_DTS_GAP_DETECTAudio dts discontiune detected
AUDIO_GAP_DETECTPlayer fix audio gap by filling silence frames in
AUDIO_OVERLAP_DETECTPlayer fix audio gap by dropping overlaped frames
VIDEO_DISCONTINUE_DETECTDiscontinue m3u8 tag found
MAX_DTS_DELTA_WITH_NEXT_SEGMENT_DETECTLarge dts gap between m3u8 ts fragments found

← xgplayer-mp4 →