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

Events

Usage

from npm package

import { Events } from 'xgplayer'
player.on(Events.PlAY, () => {
  // TODO
})

from CDN

const Events = window.Player.Events
player.on(Events.PlAY, () => {
  // TODO
})

Events from MediaElement

namevaluedescription
EVENTS.LOAD_STARTloadstartThe loadstart event is fired when the browser has started to load a resource
EVENTS.LOADED_DATAloadeddataFrame at the current playback position of the media has finished loading; often the first frame
EVENTS.BUFFERED_CHANGEbufferedchangeThe range of video.buffered has changed
EVENTS.PLAYplayPlay
EVENTS.PAUSEpausePause
EVENTS.ENDEDendedEnded
EVENTS.ERRORerrorError occurs
EVENTS.AUTOPLAY_PREVENTEDautoplay_was_preventedAuto play request was prevented by browser
EVENTS.PLAYINGplayingPlayback has resumed from pause or stall
EVENTS.SEEKINGseekingA seek operation starts
EVENTS.SEEKEDseekedA seek operation finished
EVENTS.TIME_UPDATEtimeupdateMediaElement.currentTime attribute has been updated
EVENTS.WAITINGwaitingPlayback has stopped because of a temporary lack of data
EVENTS.CANPLAYcanplayThe user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content
EVENTS.CANPLAY_THROUGHcanplaythroughThe user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content
EVENTS.DURATION_CHANGEdurationchangeThe duration attribute has been updated
EVENTS.VOLUME_CHANGEvolumechangeThe volume has changed
EVENTS.RATE_CHANGEratechangePlayback rate has changed

Events from player

namevaluedescription
EVENTS.READYreadyplayer was ready for start
EVENTS.COMPLETEcompleteMediaElement was created,
EVENTS.URL_CHANGEurlchangePlayer.src was setted for new video resource playback
EVENTS.PLAYER_FOCUSfocusUser interacting with player UI
EVENTS.PLAYER_BLURblurUser not interacting with player UI
EVENTS.FULLSCREEN_CHANGEfullscreen_changeFullscreen mode changed
EVENTS.CSS_FULLSCREEN_CHANGEcssFullscreen_changeCss-fullscreen mode changed
EVENTS.MINI_STATE_CHANGEmini_state_changeMini playback mode changed
EVENTS.DESTROYdestroyPlayer destroyed
EVENTS.REPLAYreplayReplay
EVENTS.RETRYretryPlayback failed (commonly for network staff) and player retry
EVENTS.DEFINITION_CHANGEdefinition_changePlayback definition changed ()
EVENTS.VIDEO_RESIZEvideo_resizeDOM size of player was changed
EVENTS.PIP_CHANGEpip_changePicture in picture mode changed
EVENTS.ROTATErotatePlayer was rotated
EVENTS.SHORTCUTshortcutPlayer builtin shortcut triggered
EVENTS.SEI_PARSEDSEI_PARSEDSEI info parsed by player（only for xgplayer-flv、xgplayer-hls)
EVENTS.USER_ACTIONuser_action(3.0.0-alpha.92-2之后支持) User interaction with player builtin plugins, for example: user click the play button

Examples

Fullscreen mode changed

import Player, { Events } from 'xgplayer'
player.on(Events.FULLSCREEN_CHANGE, (isFullscreen) => {
  if (isFullscreen) {
    // Fullscreen mode entered
  } else {
    // Fullscreen mode exited
  }
})

Playback rate changed

import Player, { Events } from 'xgplayer'

player.on(Events.RATE_CHANGE, () => {
  const rate = player.playbackRate // default to 1
})

Volume changed

import Player, { Events } from 'xgplayer'

player.on(Events.VOLUME_CHANGE, () => {
  const muted = player.muted // If the player is muted
  const volume = player.volume
})

Shortcut

import Player, { Events } from 'xgplayer'
const player = new Player({
  ...
})

/**
 * {
 *   action: String | Function,  // Player action triggered by shortcut
 *   disable:  Boolean,           // Player action is disabled
 *   key: String,                // Shortcut key
 *   keyCode: Number             // Shortcut keyCode
 * }
 */
player.on(Events.SHORTCUT, ({ action, disabled, key, keyCode }) => {

})

Monitor for user interaction

import Player, { Events } from 'xgplayer'
const player = new Player({
  ...
})


player.on(Events.USER_ACTION, (data, player) => {
  // data structure
  /**
   * data = {
   *   action: String,        // User action type
   *   pluginName: String,    // name of Plugin which interacted with
   *   event: Event,          // DOM event
   *   props: [{              // props list witch changed
   *     props: String,       // prop key
   *     from: any,           // value before action
   *     to: any              // value after action
   *   }],
   *   currentTime: Number,   // MediaElement currentTime
   *   duration: Number,      // MediaElement duration
   *   ended:  Boolean,        // If mediaElement is ended
   *   paused:  Boolean,       // If mediaElement is paused
   * }
   */
})

← Error →