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

事件

使用

npm包

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

cdn方式

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

媒体事件

事件名枚举值回调参数含义
EVENTS.LOAD_STARTloadstart无视频内容开始加载
EVENTS.LOADED_DATAloadeddata无视频起播数据加载完成
EVENTS.PLAYplay无播放
EVENTS.PAUSEpause无暂停
EVENTS.ENDEDended无结束
EVENTS.ERRORerrorError错误
EVENTS.PLAYINGplaying无（暂停、卡顿后）恢复播放
EVENTS.SEEKINGseeking无seek播放
EVENTS.SEEKEDseeked无seek完成
EVENTS.TIME_UPDATEtimeupdate无播放时间改变
EVENTS.WAITINGwaiting无等待加载数据
EVENTS.CANPLAYcanplay无视频缓冲足够数据，可以播放
EVENTS.CANPLAY_THROUGHcanplaythrough无视频可以流畅播放
EVENTS.DURATION_CHANGEdurationchange无视频时长发生变化
EVENTS.VOLUME_CHANGEvolumechange无音量发生变化
EVENTS.RATE_CHANGEratechange无播放速率发生变化

扩展事件

事件名枚举值回调参数含义
EVENTS.READYready无播放器完成实例化
EVENTS.AUTOPLAY_PREVENTEDautoplay_was_prevented无自动播放失败
EVENTS.AUTOPLAY_STARTEDautoplay_started无成功自动播放
EVENTS.COMPLETEcomplete无播放器创建video完成，可以开始播放
EVENTS.URL_CHANGEurlchange{ url: any }播放资源发生变化，player.src='xxx'
EVENTS.PLAYER_FOCUSfocus无播放器聚焦
EVENTS.PLAYER_BLURblur无播放器失焦
EVENTS.FULLSCREEN_CHANGEfullscreen_change{ isFullScreen: boolean }全屏状态切换
EVENTS.CSS_FULLSCREEN_CHANGEcssFullscreen_change{ isCssFullScreen: boolean }样式全屏状态切换
EVENTS.MINI_STATE_CHANGEmini_state_change{ isPip: boolean }画中画播放模式切换
EVENTS.DESTROYdestroy无播放器销毁
EVENTS.REPLAYreplay无播放器重新播放
EVENTS.RETRYretry无重试
EVENTS.DEFINITION_CHANGEdefinition_change清晰度发生变化
EVENTS.VIDEO_RESIZEvideo_resize播放器容器尺寸发生变化
EVENTS.PIP_CHANGEpip_change画中画状态切换
EVENTS.ROTATErotate无播放器被旋转
EVENTS.SHORTCUTshortcut{ data }数据格式播放器内置快捷键事件触发
EVENTS.SEI_PARSEDSEI_PARSED无SEI信息解析（目前在xgplayer-flv、xgplayer-hls插件安装时生效）
EVENTS.USER_ACTIONuser_action{ data },数据格式(3.0.0-alpha.92-2之后支持)内置插件用户行为触发，所有内置插件用户行为交互都会下发该事件，可用于用户行为埋点

Examples

全屏状态变化

import Player, { Events } from 'xgplayer'
// 监听网页全屏(即页面全屏)也是一样的逻辑
player.on(Events.FULLSCREEN_CHANGE, (isFullscreen) => {
  if (isFullscreen) {
    // 全屏TODO
  } else {
    // 退出全屏TODO
  }
})

倍速变化

import Player, { Events } from 'xgplayer'

player.on(Events.RATE_CHANGE, () => {
  const rate = player.playbackRate // 默认为1
})

音量变化

import Player, { Events } from 'xgplayer'

player.on(Events.VOLUME_CHANGE, () => {
  const muted = player.muted // 是否静音， Boolean
  const volume = player.volume  // 音量 0-1
})

快捷键操作

import Player, { Events } from 'xgplayer'
const player = new Player({
  ...
})
player.on(Events.SHORTCUT, (data) => {
  // TODO
  /**
   * data = {
   *   action: String | Function,  // 该快捷键触发的行为
   *   disable:  Boolean,           // 是否禁用
   *   key: String,                // 功能定义key
   *   keyCode: Number             // 快捷键键值
   * }
   */
})

内置插件用户行为监控

3.0.0-alpha.92-2之后版本支持

import Player, { Events } from 'xgplayer'
const player = new Player({
  ...
})
player.on(Events.USER_ACTION, (data) => {
  // data结构如下
  /**
   * data = {
   *   action: String,        // 用户行为
   *   pluginName: String,    // 从哪个插件触发
   *   props: [{              // 发生变化的属性列表
   *     props: String,       // 发生变化的属性
   *     from: any,           // 变化前的值
   *     to: any              // 变化后的值
   *   }],
   *   event: Event,          // 事件
   *   currentTime: Number,   // 当前播放时间
   *   duration: Number,      // 当前播放器时长
   *   ended:  Boolean,        // 是否播放结束
   *   paused:  Boolean,       // 是否暂停
   * }
   */
})

← 错误 →