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

API

The player is the instance object.

let player=new Player({
  id:'mse',
  url:'/mp4/'
})

Attributes

NameMeaningComment
hasStartReturn whether the current video has been playedboolean
autoplaySet/Return AutoPlay Properties
bufferedReturns the currently buffered TimeRange object collection
crossOriginSet/return whether cross domain or not
currentSrcSet/return video playback address
currentTimeSet/return video current playing time
defaultMutedSet/return video mute by default
durationReturn video length in seconds
endedReturn if video ended
errorVideo error message, this error will return text in the current language
loopWhether loop playback is turned on
mutedSet/return whether muted or not
networkStateReturn video status, automatically return the text of the current language
readyStateReturns the playing status of the video and automatically returns the text of the current language
srcSet/return the address of the current video
volumeSet/return video volume
rootPlayer outer container DOM
controlsPlayer Control Strip outer container DOM
fullscreenReturn whether the player is running with fullscreenboolean
bulletReturn whether the player bullet is onboolean
textTrackReturn whether the player textTrack is onboolean
pipReturn whether the player picture-in-picture is onboolean

Method

play

  • explanation:play the video
  • examples:
player.play()

pause

  • explanation: pause the video
  • examples:
player.pause()

reload

  • explanation: reload the video
  • examples:
player.reload()

destroy

  • explanation: destroy the player
  • examples:
player.destroy()

Note

You can use the destroy method to switch videos(with the same or different format). Code show as below:

if (player) {
  player.destroy();
}
setTimeout(function () {
  player = null;
  player = new Xgplayer({
    id: 'domId',
    url: 'newUrl'
  });
}, 0);

canPlayType

  • explanation: Detect whether your browser can play different types of videos
  • examples:
player.canPlayType('video/mp4; codecs="avc1.64001E, mp4a.40.5"')

getBufferedRange

  • explanation: Returns the current buffer segment time range, 'start' indicates the buffer start time, and 'end' indicates the buffer end time.
  • return: [start,end]
  • examples:
player.getBufferedRange()

start

  • explanation: Start the player, start is generally the player internal implicit call, the main function is to add video to the DOM
  • param: url video address
  • examples:
player.start(url)

replay

  • explanation: The player replays, and the replay component invokes this method, supporting the beforeReplay hook. If beforeReplay returns false, it prevents the replay action.
  • examples:
player.replay()

install [static method]

  • explanation: Plugins installation method.
  • examples:
Player.install('play',function(){})

Event

NameMeaning
playplay
playingcontinue playing
pausepause
endedended
errorerror
seekingseek play
seekedseek play ended
timeupdateplay time update
waitingwait for data to load
canplayvideo can play
canplaythroughvideo can play through
durationchangeduration change
volumechangevolume change
bufferedChangebuffered change

Event Registration/Logout

permanent registration

player.on('eventName',function(){
  //The eventName can be found in the above query
})

one time registration

player.once('eventName',function(){

})

event logout

player.off('eventName',function(){

})

event trigger

player.emit('eventName')

Life Cycle

Instantiation Completed

The player invokes the Player for instantiation. After the instantiation is completed, the ready event is triggered. It can be determined whether the instantiation is completed by listening to the ready. The instantiation mainly includes custom UI generation, event binding, plugin instantiation. code show as below:

let player=new Player({/*configuration*/});
player.once('ready',()=>{console.log('ready')})

End of Video Generation

Considering the limitations of saving video traffic and HTTP connections, when the PC-side player instantiates, only the UI takes effect and no video is generated. Only after the player is clicked and played, the video tag is created to pull the video for playback. If you want to capture the opportunity to create video, listen for the complete event. code show as below:

let player=new Player({/*configuration*/});
player.once('complete',()=>{console.log('complete')})

However, it is worth noting that there is native video that will be created if the mobile phone does not using the whitelisted . Since some models have bugs in the inserted video, it will generate video directly when the player is instantiated. The execution of this action is in the mobile plugin, so it means that the complete event will precede the ready event.

Instance destroyed

When the player destroys the instance, it will trigger the destroy event. The code is as follows:

let player=new Player({/*configuration*/});
player.once('destroy',()=>{console.log('destroy')})

Note

The ready event and complete event are already triggered at the time of instantiation. To ensure that the "post-monitoring" mode can capture events, do not use asynchronous operations such as setTimeout, Promise, etc. If you need to use these asynchronous operations, please complete within the response function.

  • Wrong

    let player=new Player({/*configuration*/});
    setTimeout(function () {
      player.once('ready',()=>{console.log('ready')})
    }, 1000);
    
  • Correct

    let player=new Player({/*configuration*/});
    player.once('ready',()=>{
      setTimeout(function () {
        console.log('ready')
      }, 1000);
    })
    

Auxiliary library

util

  • createDom
  • hasClass
  • addClass
  • removeClass
  • toggleClass
  • findDom
  • format
  • event

sniffer

  • browser
  • platform
  • version
  • device