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')
  }
})

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

# pip

# config

# position

# index

# showIcon

# API

# requestPIP ()

# exitPIP

# switchPIP()

# isPIPAvailable()

# props

# isPip

# events

# Events.PIP_CHANGE

pip