Picture-in-Picture Support

[mihar-22]

Tasks

Design and implement an interface to support entering and exiting picture-in-picture (PiP) across browsers/providers.

API

Player API

• pictureInPicture.active: boolean
• pictureInPicture.supported: boolean

Player Methods

• enterPictureInPicture(): Promise<void>
• exitPictureInPicture(): Promise<void>

Events

• picture-in-picture-change
• media-enter-pip-request
• media-exit-pip-request

Provider API

• Provider's need to expose a picture-in-picture API similar to the on available on the player and the existing fullscreen API.

Notes

• Careful when entering/exiting fullscreen - toggle PiP correctly.

References

• https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/player.tsx#L636-L656
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/file/file.tsx#L443-L447
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerMethods.ts#L87-L107
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/adapters/PiPAdapter.ts
• https://github.com/kaltura/playkit-js/blob/master/src/fullscreen/fullscreen-controller.js