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

pip

播放器画中画功能,即picture-in-picture不建议改动。支持非当前标签页也可以小窗看视频 源码

pluginName: pip

具体原生api请参考picture-in-picture

提示

  1. 该插件只在pc端生效
  2. 该插件和2.0中pip插件不是同一个,该插件为真实的画中画,基于chrome的picture-in-picture API实现,原来2.0的pip插件重新命名为minscreen
  3. 进入picture-in-picture是个全局行为,必须用户行为触发,在用户无交互的情况下调用会报错
  4. Document picture-in-picture 支持画中画自定义UI,目前Chrome浏览器尚处于Original Trial 阶段(chrome version 111-> 115),下一阶段会将特性ship到浏览器(预计chrome 116)

config

position

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

index

  • @type: Number
  • default: 6

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

showIcon

  • @type: Boolean
  • default: false

是否显示切换按钮,默认false

该配置项支持从player配置上设置,例如:

const playerConfig = {
  pip: true, //显示切换按钮
  ...
}

API

requestPIP ()

  • @desc: 进入画中画
  • @return: { Boolean} true/false,切换成功返回true, 浏览器不支持或者切换失败返回false

exitPIP

  • @desc: 退出画中画
  • @return: 同requestPIP

switchPIP()

  • @desc: 切换PIP状态, 会根据当前状态来决定调用requestPIP或者exitPIP
  • @return: { Boolean} true/false,切换成功返回true, 浏览器不支持获取切换失败返回false

isPIPAvailable()

  • @desc: 探测浏览器是否支持画中画
  • @return: { Boolean} true/false

props

isPip

  • true/ false, 播放器当前的pip状态

events

Events.PIP_CHANGE

  • 值: pip_change
  • 触发: 切换进入/退出画中画的时候触发

使用示例

import Player, { Events } from 'xgplayer'
import 'xgplayer/dist/index.min.css'

const player = new Player({
  ...
})

player.on(Events.PIP_CHANGE, (isPip) => {
  if (isPip) {
    console.log('enter picture-in-picture')
  } else {
    console.log('exit picture-in-picture')
  }
})