At the WWDC15 Apple introduces Safari 9 (Safari 10 for MacOS), there now have support for Picture in Picture.
However, they just say:
If you use custom HTML5 video controls, you can add Picture in Picture functionality using the JavaScript presentation mode API.
but not telling how or where to find its documentation.
The default video controller has the button, but how do I trigger it by javascript?
PiPifier is a native macOS 10.12 Safari extension that lets you use every HTML5 video in Picture in Picture mode. If you have an HTML5 video playing on any website like Youtube just press the PiPifier icon in Safari's toolbar to enable Picture-In-Picture for this video.
In the Safari app on your Mac, choose Safari > Settings, then click Websites. Click Auto-Play in the list on the left. Do any of the following: Choose settings for a website in the list: Select the website on the right, then choose the option you want for it.
First if you are looking for making Picture in Picture in Chrome then see this link
The custom controls now include markup for a new picture-in-picture button, which is visible by default.
Listing 1 This markup adds a picture-in-picture button
<video id="video" src="my-video.mp4"></video>
<div id="controls">
<button id="pipButton">PiP</button>
</div>
Add a function to toggle Picture in Picture using the webkitSetPresentationMode property from the presentation mode API.
Listing 2 This code toggles Picture in Picture using a click event listener.
var video = document.getElementById('video');
var PiP = document.getElementById('pipButton');
// picture-in-picture
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
// Toggle PiP when the user clicks the button.
PiP.addEventListener("click", function(event) {
video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
});
} else {
PiP.disabled = true;
}
var video = document.getElementById('video');
var PiP = document.getElementById('picture-in-picture');
// picture-in-picture
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
// Toggle PiP when the user clicks the button.
PiP.addEventListener("click", function(event) {
video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
});
} else {
PiP.disabled = true;
}
Only works in Safari 10+<br>
<video controls id="video" x-webkit-airplay="allow" width="320">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="controls">
<button id="picture-in-picture">Picture in Picture</button>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With