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

progresspreview

pc端播放器进度条预览插件,不建议改动。源码

pluginName: progresspreview

功能说明:

  1. 包括鼠标hover时间预览
  2. 缩略图预览(在有缩略帧序列图片配置的时候)
  3. 关键点打点预览、文案显示的功能
  4. 进度条拖动的时候帧预览图打底

该插件还会读取playerConfig上的progressDot, 来渲染剧情点,具体数据结构请看config.progressDot

Note

  1. 该插件只适用于pc端
  2. 该插件依赖progress插件, progress插件禁用的情况下,该插件也将不注册
  3. 该插件依赖playerConfig.thumbnail配置显示预览图

config

mode

  • @type: String
  • default: ``, 枚举值有shortproduction

预览展示类型

defaultText

  • @type: String
  • default: ``

鼠标hover的时候默认展示文案

isShowThumbnail

  • @type: Boolean
  • default: true

是否在进度条上展示缩略图预览, 该配置生效的前提是playerConfig.thumbnail存在

isShowCoverPreview

  • @type: Boolean
  • default: false

是否添加在快进/快退的时候添加视频区域的预览,该项生效的前提是playerConfig.thumbnail存在

API

// iSpot结构说明
const iSpot = {
  id: Number, // 标记唯一标识,用于删除的时候索引
  time: Number, // 进度条在此时间戳打点 单位为s
  duration?: Number, // 进度条标识点的时长 默认1s【可选】单位为s
  text?: String, // 打点处的自定义文案
  color?: '#fff', // 进度条标识点的显示颜色【可选】
  style?: { [propName: String]: String | Number } // 进度条标识点的附加样式【可选】
}

createDot(iSpot)

  • @desc: 新增一个故事点
  • @param: { Object } iSpot 故事点数据

updateDot(iSpot)

  • @desc: 更新一个故事点 -@param: { Object } iSpot

deleteDot(id)

  • @desc: 删除一个故事点
  • @param: { int } id

deleteAllDots()

  • @desc: 删除所有的故事点

updateAllDots(iSpots)

  • @desc: 批量全部更新当前故事点
  • @param: { Array } iSpots 要更新的故事点列表

changeThumbnail(thumbnailConfig)

  • @desc: 更新缩略图配置
  • @param: { Object } thumbnailConfig 缩略图配置

hooks

previewClick

  • @desc: 预览图点击

使用方式如下:

  //预览图点击hook启用
  player.usePluginHooks('progresspreview','previewClick', (plugin, time) => {
    // 点击的预览图所在的时间点 plugin是插件实例对象
    console.log('...args', time)
    return true
  })