Safari Picture In Picture - Custom HTML5 Video Adapter

Question

Safari HTML5 Custom Video Controller with Picture In Picture (PiP)

At WWDC15, Apple introduces Safari 9 (Safari 10 for MacOS), now has support for Picture in Picture.

However, they just say:

If you use custom HTML5 controls, you can add a picture-in-picture feature using the JavaScript presentation mode API.

but not specifying how and where to find your documentation.

The video controller has a button by default, but how can I launch it using javascript?

Answer 1

First, if you are looking to make picture-in-picture in Chrome, then check out this link

---

Add a picture-in-picture element to your markup

User controls now include markup for the new picture-in-picture button, which is displayed 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 button

Add a function to switch the picture-in-picture using the webkitSetPresentationMode property from the presentation mode API.

Listing 2, this code switches the 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 View Mode API
• developer.apple.com

---

In battle.

 var video = document.getElementById('video'); var PiP = document.getElementById('picture-in-picture'); // return false if it is a computer OS var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|webOS|BlackBerry|IEMobile|Opera Mini)/i) || false; if (isMobile[0] == 'iPad' || isMobile == false) { // 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; } } 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>