Safari Picture In Picture - custom HTML5 video controller

12,208

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


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>
Share:
12,208

Related videos on Youtube

TheCrazyProfessor
Author by

TheCrazyProfessor

Hello there, my name is Benjamin, I'm a Web Developer Javascript / jQuery PHP HTML5 CSS3 Aphace Nginx Phyton Ajax Swift Java Lua C# .NET ASP.NET Angular Node.js

Updated on August 06, 2022

Comments

  • TheCrazyProfessor
    TheCrazyProfessor over 1 year

    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?