3

Picture-in-Picture API

 3 years ago
source link: https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Picture-in-Picture API

The Picture-in-Picture API allow websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device.

Interfaces

PictureInPictureWindow Represents the floating video window; contains width and height properties, and an onresize event handler property.

Methods

The Picture-in-Picture API adds methods to the HTMLVideoElement and Document interfaces to allow toggling of the floating video window.

Methods on the HTMLVideoElement interface

HTMLVideoElement.requestPictureInPicture() Requests that the user agent enters the video into picture-in-picture mode

Methods on the Document interface

Document.exitPictureInPicture() Requests that the user agent returns the element in picture-in-picture mode back into its original box.

Properties

The Picture-in-Picture API augments the HTMLVideoElement, Document, and ShadowRoot interfaces with properties that can be used to determine if the floating video window mode is supported and available, if picture-in-picture mode is currently active, and which video is floating.

Properties on the HTMLVideoElement interface

HTMLVideoElement.autoPictureInPicture The autoPictureInPicture property will automatically enter and leave the picture-in-picture mode for a video element when the user switches tab and/or applications. HTMLVideoElement.disablePictureInPicture The disablePictureInPicture property will provide a hint to the user agent to not suggest the picture-in-picture to users or to request it automatically.

Properties on the Document interface

Document.pictureInPictureEnabled The pictureInPictureEnabled property tells you whether or not it is possible to engage picture-in-picture mode. This is false if picture-in-picture mode is not available for any reason (e.g. the "picture-in-picture" feature has been disallowed, or picture-in-picture mode is not supported).

Properties on the Document or ShadowRoot interfaces

Document.pictureInPictureElement / ShadowRoot.pictureInPictureElement The pictureInPictureElement property tells you which Element is currently being displayed in the floating window (or in the shadow DOM). If this is null, the document (or shadow DOM) has no node currently in picture-in-picture mode.

Events

The Picture-in-Picture API defines three events, which can be used to detect when picture-in-picture mode is toggled and when the floating video window is resized.

enterpictureinpicture Sent to a HTMLVideoElement when it enters picture-in-picture mode. The associated event handler is HTMLVideoElement.onenterpictureinpicture leavepictureinpicture Sent to a HTMLVideoElement when it leaves picture-in-picture mode. The associated event handler is HTMLVideoElement.onleavepictureinpicture resize Sent to a PictureInPictureWindow when it changes size. The associated event handler is PictureInPictureWindow.onresize

Controlling styling

The :picture-in-picture CSS pseudo-class matches the video element currently in picture-in-picture mode, allowing you to configure your stylesheets to automatically adjust the size, style, or layout of content when a video switches back and forth between picture-in-picture and traditional presentation modes.

Controlling access

The availability of picture-in-picture mode can be controlled using Feature Policy. The full-screen mode feature is identified by the string "picture-in-picture", with a default allow-list value of "self", meaning that picture-in-picture mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.

See Using Feature Policy to learn more about using Feature Policy to control access to an API.

Examples

In this example, a video is presented in a web page. Clicking the button below lets the user toggle the floating video window.

Toggling picture-in-picture mode

This code is called by a click handler when the user clicks the "Toggle Picture-in-Picture" button:

function togglePictureInPicture() {
  if (document.pictureInPictureElement) {
      document.exitPictureInPicture();
  } else {
    if (document.pictureInPictureEnabled) {
      video.requestPictureInPicture();
    }
  }
}

This block starts by looking at the value of the document's pictureInPictureElement attribute. If the value is null, no video is in the floating window. so we can request a video to enter the picture-in-picture mode; otherwise, it's the element that's currently in picture-in-picture mode. Switching to picture-in-picture mode is done by calling HTMLVideoElement.requestPictureInPicture() on the <video> element.

If a video is in the floating window (pictureInPictureElement is not null), we call exitPictureInPicture() on the document to bring the video back into its initial box.

Specifications

Specification Status Picture-in-Picture API Draft

Browser compatibility

HTMLVideoElement.requestPictureInPicture

Report problems with this compatibility data on GitHubdesktopmobileChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
requestPictureInPicture
Full support69Full support79No supportNoNo supportNoFull support56Full support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNo

Legend

Full supportFull support
No supportNo support

HTMLVideoElement.autoPictureInPicture

Report problems with this compatibility data on GitHubdesktopmobileChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
autoPictureInPicture
No supportNoNo supportNoNo supportNoNo supportNoNo supportNoFull support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNo

Legend

Full supportFull support
No supportNo support

HTMLVideoElement.disablePictureInPicture

Report problems with this compatibility data on GitHubdesktopmobileChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
disablePictureInPicture
Full support69Full support79No supportNoNo supportNoFull support56Full support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNo

Legend

Full supportFull support
No supportNo support

Document.pictureInPictureEnabled

Report problems with this compatibility data on GitHubdesktopmobileChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
pictureInPictureEnabled
Full support69Full support79No supportNoNo supportNoFull support56Full support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNo

Legend

Full supportFull support
No supportNo support

Document.exitPictureInPicture

Report problems with this compatibility data on GitHubdesktopmobileChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
exitPictureInPicture
Full support69Full support79No supportNoNo supportNoFull support56Full support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNo

Legend

Full supportFull support
No supportNo support

Document.pictureInPictureElement

Report problems with this compatibility data on GitHubdesktopmobileChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
pictureInPictureElement
Full support69Full support79No supportNoNo supportNoFull support56Full support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNo

Legend

Full supportFull support
No supportNo support

PictureInPictureWindow

Report problems with this compatibility data on GitHubdesktopmobileChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
PictureInPictureWindow
Full support69Full support79No supportNoNo supportNoFull support56Full support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNoheightFull support69Full support79No supportNoNo supportNoFull support56Full support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNoonresizeFull support69Full support79No supportNoNo supportNoFull support56Full support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNoresize eventFull support69Full support79No supportNoNo supportNoFull support56Full support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNowidthFull support69Full support79No supportNoNo supportNoFull support56Full support13.1No supportNoNo supportNoNo supportNoNo supportNoFull support13.4No supportNo

Legend

Full supportFull support
No supportNo support

See also


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK