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

screenshot

播放器内部截图,截图格式可以自定义。源码

pluginName: screenshot

该插件默认隐藏,如需开启如下配置playerConfig

const player = new Player({
  ...,
  screenShot: true, //显示截图按钮
  videoAttributes: {
    crossOrigin: 'anonymous'
  }
})

// OR

const player = new Player({
  ...,
  screenShot: {
    disable: false
  }, //显示截图按钮
  videoAttributes: {
    crossOrigin: 'anonymous'
  }
})

注意

务必为播放器提前配置好跨域 crossOrigin ,否则 canvas toDataURL 会触发错误:
"Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported."

config

position

插件DOM挂载位置,默认为player.controls.right

index

  • @type: Number
  • default: 6 插件DOM在挂载点内的排序,默认为6,越小越靠前(若index相同,后实例化的插件会被放置在前面)

quality

  • @type: Number
  • default: 0.92
  • 说明:生成图片质量,默认值0.92

type

  • @type: String
  • default: image/png
  • 图片类型,默认值 image/png

format

  • @type: String
  • default: .png
  • 说明:图片存储格式,默认 .png

width

  • @type: Number
  • default: 600
  • 说明:图片宽度,默认值 600

height

  • @type: Number
  • default: 337
  • 说明: 图片高度,默认值 337

disable:

  • @type: Boolean
  • default: false
  • 说明:是否禁用,默认值false

该配置项可通过playerConfig.screenShot控制,默认值是false, 例如:

const playerConfig = {
  screenShot: true //显示截图按钮
  ...
}

API

shot(width, height, option)

  • @desc: 截图
  • @param: { Number } width 截图宽度
  • @param: { Number } height截图高度
  • @param: { {quality: Number, type: String} } option, 默认值{ quality: 0.92, type: 'image/png' }
  • @return: Promise<string>

saveScreenShot(data, filename)

  • @desc: 下载图片
  • @param: { String } data 图片DataURL
  • @param: { String } filename 图片文件名

events

Events.SCREEN_SHOT

  • 值: screenShot
  • 触发: 点击截图按钮并截图成功
const player = new Player({
  ...
})

player.on(Events.SCREEN_SHOT, (url)) => {
  console.log('screen shot success')
})