西瓜播放器 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. Google Chrome 116版本开始,对外正式提供了文档画中画 Document picture-in-picture 的能力。文档画中画现在可以对任何元素(而不仅仅是“视频”)实现画中画。扩展了现有的适用于 <video> 的 Picture-in-Picture API,原来的 API 仅允许在画中画窗口中放置 <video> 元素。这次变更使得Web开发人员能够为用户提供更好的画中画体验。

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

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