Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Safari Picture In Picture - custom HTML5 video controller

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.

enter image description here

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?

like image 318
TheCrazyProfessor Avatar asked Sep 10 '16 20:09

TheCrazyProfessor


People also ask

Can you do picture in picture on Safari?

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.

How do I make videos play automatically in Safari?

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.


1 Answers

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>
like image 50
TheCrazyProfessor Avatar answered Oct 07 '22 01:10

TheCrazyProfessor