pip
播放器画中画功能,即picture-in-picture
不建议改动。支持非当前标签页也可以小窗看视频 源码
pluginName: pip
具体原生api请参考picture-in-picture
提示
- 该插件只在pc端生效
- 该插件和2.0中pip插件不是同一个,该插件为真实的画中画,基于chrome的picture-in-picture API实现,原来2.0的pip插件重新命名为minscreen
- 进入picture-in-picture是个全局行为,必须用户行为触发,在用户无交互的情况下调用会报错
- Document picture-in-picture 支持画中画自定义UI,目前Chrome浏览器尚处于Original Trial 阶段(chrome version 111-> 115),下一阶段会将特性ship到浏览器(预计chrome 116)
config
position
@type
:String
default
:controlsRight
, 具体枚举值请看plugin-positions
插件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')
}
})