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

progress

播放器进度条插件，不建议改动。源码

pluginName: progress

功能说明:

  1. 显示当前播放时间
  2. 显示当前视频缓存时长
  3. 支持拖拽滑块操作视频快进/快退
  4. 支持按比例分段显示进度条

config

position

插件DOM挂载位置，默认为player.controls.center

index

  • @type: Number
  • default: 0

插件DOM在挂载点内的排序，默认为0，越小越靠前（若index相同，后实例化的插件会被放置在前面）

isDragingSeek

  • @type: Boolean
  • default: false

是否在拖拽的过程中更新currentTime,pc端 默认true, 移动端默认false

closeMoveSeek[试用]

  • @type: Boolean
  • default: false

是否关闭滑块seek能力，设置为true，则进度条无法快进/快退

isPauseMoving

  • @type: Boolean
  • default: false

是否在拖拽的过程是否暂停视频播放，默认false, 如果设置为true, 则在拖动进度条的时候会暂停播放视频内容

isCloseClickSeek

  • @type: Boolean
  • default: false

是否关闭进度条点击seek能力，如果该项为true, 则只能通过拖拽进行快进/快退，点击进度条无效

fragments

  • @type: Array
  • default: [{percent: 1}]

进度条分段显示配置, 配置该项之后，进度条会按照比例拆分为多段显示，该功能可用于剧情分段提示

const playerConfig = {
  ...,
  progress: {
    fragments: [
      {
        percent: 0.2
      }, {
        percent: 0.2,
      }, {
        percent: 0.6
      }
    ]
  }
}

效果下图：

miniMoveStep

  • @type: Int
  • default: 5

进度条移动灵敏度最小阈值, 移动端是touch的水平方向距离，pc端为鼠标移动水平方向距离

miniStartStep

  • @type: Int
  • default: 2

进度拖拽开始最小移动位移阈值

API

addCallBack(type, data)

  • 说明: 添加回调
  • @param: {string } type 类型 dragstart | dragend | dragmove | click
  • @param: { Function } event

支持添加的回调类型如下：

回调类型说明
dragstart拖拽开始
dragmove拖拽移动 or 只移动
dragend拖拽结束
click点击(未发生move视作点击)

使用示例:

const progress = player.getPlugin('progress')
  /**
   * 回调数据data详解
   * {
   *  percent,      // 当前位置在进度条上的占比 0 - 1
   *  currentTime,  // 当前位置对应的时间s
   *  offset,       // 当前位置和进度条做左侧是偏移量 px
   *  width:200,    // 当前进度条宽度 px
   *  left,
   * }
   **/

progress.addCallBack('dragstart', (data) => {
  console.log('time', data.currentTime)
  console.log('percent', data.percent)
})

removeCallBack(type, data)

  • 说明: 移除回调
  • @param: { String } type 类型 dragstart|dragend|dragmove|click
  • @param: { Function } event 具体数据

Hooks

dragstart

进度条开始拖拽的时候执行

// 通过player调用
player.usePluginHooks('progress', 'dragstart', (plugin, event, data) =>{
  // TODO
})

// 通过插件实例调用
player.getPlugin('progress').useHooks('dragstart', (plugin, event, data) =>{
  // TODO
  /**
   * 如果返回false，则不执行默认逻辑
   * 如果返回true，则执行默认行为seek操作
   * */
})

dragend

进度条结束拖拽的时候执行

使用方式同dragstart

drag

进度条拖拽过程中执行 使用方式同dragstart

一些使用hook的场景

限制用户只能在播放过的位置进行seek,即向前seek

import { Events } from 'xgplayer'
let currentTime = 0

// 监听用户的播放进度
player.on(Events.TIME_UPDATE, () => {
  if (player.currentTime > currentTime) {
    currentTime = player.currentTime
  }
})

player.usePluginHooks('progress', 'dragstart', (plugin, event, data) => {
  // 当点击开始的位置计算出来的时间data.currentTime大于当前播放过的时间，则阻止默认行为
  if (data.currentTime > currentTime) {
    return false
  }
  return true
})

player.usePluginHooks('progress', 'drag', (plugin, event, data) =>{
  // 当拖拽的位置计算出来的时间data.currentTime大于当前播放过的时间，则阻止默认行为
  if (data.currentTime > currentTime) {
    return false
  }
  return true
})

← progresspreview →