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是个全局行为，必须用户行为触发，在用户无交互的情况下调用会报错
Google Chrome 116版本开始，对外正式提供了文档画中画 Document picture-in-picture 的能力。文档画中画现在可以对任何元素（而不仅仅是“视频”）实现画中画。扩展了现有的适用于 <video> 的 Picture-in-Picture API，原来的 API 仅允许在画中画窗口中放置 <video> 元素。这次变更使得Web开发人员能够为用户提供更好的画中画体验。

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, //显示切换按钮
  ...
}

preferDocument

@type: Boolean
default: false

是否使用文档画中画方式展示，默认false

width

@type: Number
default: undefined

文档画中画方式展示时的宽度，默认不指定时，会根据当前播放器宽度来计算

height

@type: Number
default: undefined

文档画中画方式展示时的高度，默认不指定时，会根据当前播放器高度来计算

docPiPNode

@type: Node
default: undefined

表示将该节点，传递到子窗口根节点，该节点可以为当前document中任意的dom元素，不要求一定包含播放器或者video元素。如果不传此配置，则将播放器的根节点传递到子窗口。

docPiPStyle

@type: String
default: undefined

表示将自定义的样式，传递到窗口内。如果配置此字段，则会将其内容包装到style标签内，并将style传递到子窗口内。 style标签内包含基础样式+容器样式，docPiPStyle会覆盖掉默认容器样式。

默认基础样式：

body {padding:0; margin:0;}

默认控制容器样式：

.xgplayer{width: 100%!important; height: 100%!important;}

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
触发: 切换进入/退出画中画的时候触发

usage

基础使用示例

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

文档画中画使用示例

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

const player = new Player({
  pip: {
    preferDocument: true,
  }
})

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

# pip

# config

# position

# index

# showIcon

# preferDocument

# width

# height

# docPiPNode

# docPiPStyle

# API

# requestPIP ()

# exitPIP

# switchPIP()

# isPIPAvailable()

# props

# isPip

# events

# Events.PIP_CHANGE

# usage

pip