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

progress

Player progress plugin。SourceCode

pluginName: progress

Function description:

  1. Display current playing time
  2. Display current cached time
  3. Support dragging the slider to operate the video to fast forward/rewind
  4. Support to display the progress bar in proportions

config

index

  • @type: Number
  • default: 0

isDragingSeek

  • @type: Boolean
  • default: false

Whether to update currentTime during drag and drop Default true on PC Default false on mobile

closeMoveSeek

  • @type: Boolean
  • default: false

Whether to turn off the seek ability of the slider,Set to true, the progress bar cannot fast forward/rewind

isPauseMoving

  • @type: Boolean
  • default: false

Whether to pause video playback during drag and drop,default false, If set to true, the video will be paused when the progress bar is dragged

isCloseClickSeek

  • @type: Boolean
  • default: false

Whether to close the progress bar and click seek ability

fragments

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

Progress bar segment display configuration, after configuring this item, the progress bar will be split into multiple segments according to the proportions. This function can be used for plot segmentation prompts

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

The effect is as follows:

miniMoveStep

  • @type: Int
  • default: 5

Minimum threshold of progress bar movement sensitivity

miniStartStep

  • @type: Int
  • default: 2

The minimum movement threshold for the start of the progress drag

API

addCallBack(type, data)

  • @description: Add callback
  • @param: {string } type value dragstart | dragend | dragmove | click
  • @param: { Function } event

The supported callback types are as follows:

valuedescription
dragstartDrag start
dragmoveDrag to move or just move
dragendDrag to end
clickClick on(No move is regarded as a click)

使用示例:

const progress = player.getPlugin('progress')
  /**
   * Detailed explanation of callback data
   * {
   *  percent,      // The percentage of the current position on the progress bar 0 - 1
   *  currentTime,
   *  offset,       //
   *  width:200,    // Current progress bar width, px
   *  left,
   * }
   **/

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

removeCallBack(type, data)

  • @description:: Remove callback
  • @param: { String } type, value dragstart|dragend|dragmove|click
  • @param: { Function } event

Hooks

dragstart

Executed when the progress bar starts dragging

// Called by player instance
player.usePluginHooks('progress', 'dragstart', (plugin, event, data) =>{
  // TODO
})

// Called by plugin instance
player.getPlugin('progress').useHooks('dragstart', (plugin, event, data) =>{
  // TODO
  /**
   * If false is returned, the default logic is not executed
   * If true is returned, the default behavior seek operation is performed
   * */
})

dragend

Executed when the progress bar finishes dragging

Use the same way as dragstart

drag

Executed during the dragging process of the progress bar

Use the same way as dragstart

Some scenarios using hooks

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

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

// Monitor the user's playback progress
player.on(Events.TIME_UPDATE, () => {
  if (player.currentTime > currentTime) {
    currentTime = player.currentTime
  }
})

player.usePluginHooks('progress', 'dragstart', (plugin, event, data) => {
  // When the time data.currentTime calculated from the starting position of the click is greater than the current playing time, the default behavior is prevented
  if (data.currentTime > currentTime) {
    return false
  }
  return true
})

player.usePluginHooks('progress', 'drag', (plugin, event, data) =>{
  // When the time calculated by the dragged position data.currentTime is greater than the current playing time, prevent the default behavior
  if (data.currentTime > currentTime) {
    return false
  }
  return true
})