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

pip

Player picture-in-picture function plug-in，Source

pluginName: pip

The native api refer to picture-in-picture

Note

  1. The plug-in only takes effect on the PC side
  2. Entering picture-in-picture is a global behavior，must be triggered by user behavior。Calling API without user interaction will report an error
  3. The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content. It extends the existing Picture-in-Picture API for <video> that only allows an HTML <video> element to be put into a Picture-in-Picture window.

config

position

  • @type: String
  • default: POSITIONS.ROOT_RIGHTFor specific enumeration values, please see plugin-positions

index

  • @type: Number, value: 6

showIcon

  • @type: Boolean, default: false
  • @desc: Whether to show the toggle button

This configuration item can be set from player.config，E.g:

const playerConfig = {
  pip: true, //Show pip toggle button
  ...
}

preferDocument

  • @type: Boolean
  • default: false

Whether to use document picture-in-picture display, default false

width

  • @type: Number
  • default: undefined

The width of the document when displayed in picture-in-picture mode. If not specified by default, it will be calculated based on the current player width.

height

  • @type: Number
  • default: undefined

The height of the document when displayed in picture-in-picture mode. If not specified by default, it will be calculated based on the current player height.

docPiPNode

  • @type: Node
  • default: undefined

Indicates that the node is passed to the root node of the sub-window. The node can be any DOM element in the current document and does not necessarily contain a player or video element. If this configuration is not passed, the root node of the player is passed to the child window.

docPiPStyle

  • @type: String
  • default: undefined

Indicates that the customized style will be transferred to the window. If this field is configured, its content will be wrapped into the style tag and the style will be passed into the child window. The style tag contains basic style + container style, and docPiPStyle will override the default container style.

Default base style:

body {padding:0; margin:0;}

Default control container style:

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

API

requestPIP ()

  • @desc: Enter picture-in-picture

  • @return: { Boolean} true/false, Switch successfully return true, the browser does not support or the switch fails to return false

exitPIP

  • @desc: Exit Picture in Picture

  • @return: 同requestPIP

switchPIP()

  • @desc: Switch PIP state, Will decide to call requestPIP or exitPIP according to the current status

  • @return: { Boolean} true/false, Switch successfully return true, the browser does not support or the switch fails to return false

isPIPAvailable()

  • @desc: Detect whether the browser supports picture-in-picture
  • @return: { Boolean} true/false

props

isPip

  • true/ false, The current pip status of the player

events

Events.PIP_CHANGE

  • value: pip_change
  • Trigger timing: Triggered when switching to enter/exit picture-in-picture

usage

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

Document picture-in-picture usage:

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

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

← play →