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 n

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>