javascript - Safari Picture In Picture - custom HTML5 video controller

Question

Safari HTML5 custom video controller with Picture In Picture (PiP)

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?

Answer 1

First if you are looking for making Picture in Picture in Chrome then see this link

---

Add a Picture-in-Picture Element to Your Markup

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 Functionality to the Button

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;
 }

---

Resource

• Javascript presentation mode API
• developer.apple.com

---

In action.

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>