Adding Picture in Picture to your Safari media controls
Create a custom control that adds Picture in Picture to your Safari media player.
Overview
Although default controls are available for audio and video elements in your Safari webpage, you can also create your own custom media controls. One of the custom controls you should add is Picture in Picture. With Picture in Picture, your video remains in view in a floating video overlay while users interact with other apps.
Write markup for a custom control
In this example, the custom controls for a video have only a Play button and a hidden Pause button:
<video id="video" src="my-video.mp4"></video>
<div id="controls">
<button id="playButton">Play</button>
<button id="pauseButton" hidden>Pause</button>
</div>Add a Picture-in-Picture element to your markup
Add markup for a new Picture-in-Picture button, which is visible by default.
<video id="video" src="my-video.mp4"></video>
<div id="controls">
<button id="playButton">Play</button>
<button id="pauseButton" hidden>Pause</button>
<button id="PiPButton">PiP</button>
</div> Add functionality to the button
Add a function to toggle Picture in Picture using the webkitSetPresentationMode property from the presentation mode API.
if (video.webkitSupportsPresentationMode && video.webkitSupportsPresentationMode("picture-in-picture") && typeof video.webkitSetPresentationMode === "function") {
// Toggle PiP when the user clicks the button.
pipButtonElement.addEventListener("click", function(event) {
video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
});
} else {
pipButtonElement.disabled = true;
}