11

I'm currently working on integrating the Picture-In-Picture (PiP) feature into video player using custom HTML5 video controls. With the recent introduction of PiP support in Safari 9 at WWDC15, I'm eager to enhance the user experience on my site.

enter image description here

During WWDC15, Apple unveiled Safari 9 (Safari 10 for MacOS), which introduced support for the Picture-in-Picture feature in their web browser.

However, their guidance was limited:

If you're using custom HTML5 video controls, you can integrate Picture-in-Picture functionality using the JavaScript Presentation Mode API.

Unfortunately, they did not provide specific instructions or direct users to relevant documentation on how to implement this.

While the default video controller incorporates the PiP button, the challenge lies in understanding how to activate it programmatically using JavaScript.

TheCrazyProfessor
  • 919
  • 1
  • 15
  • 31

1 Answers1

14

To activate the Picture-in-Picture (PiP) feature programmatically using JavaScript, you'll need to utilize the JavaScript Presentation Mode API. For more detailed information on PiP, you can refer to the W3C Picture-in-Picture specification.

Below are the steps to integrate and activate PiP in your HTML5 video player with custom controls:

1. Add a Picture-in-Picture Button to Your Markup

You'll need to add a button element to your HTML markup that will be used to trigger the Picture-in-Picture mode.

html:

<video id="video" src="my-video.mp4"></video>
<div id="controls">
    <button id="pipButton">PiP</button>
</div>

2. Add Functionality to the Button

Use JavaScript to toggle the Picture-in-Picture mode when the user clicks the button. This involves utilizing the webkitSetPresentationMode property from the presentation mode API.

javascript:

var video = document.getElementById('video');
var PiP = document.getElementById('pipButton');

// Check for browser support and API functionality
if (document.pictureInPictureEnabled) {
    // Toggle PiP on button click
    PiP.addEventListener("click", async function(event) {
        if (video !== document.pictureInPictureElement) {
            try {
                await video.requestPictureInPicture();
            } catch (error) {
                console.error("Failed to enter PiP mode:", error);
            }
        } else {
            try {
                await document.exitPictureInPicture();
            } catch (error) {
                console.error("Failed to exit PiP mode:", error);
            }
        }
    });
} else {
    PiP.disabled = true;
}

Additional Resources

TheCrazyProfessor
  • 919
  • 1
  • 15
  • 31
  • 1
    @Toniq Sadly iPhones dosn’t have support for picture-in-picture – TheCrazyProfessor Nov 23 '18 at 09:42
  • But you still get true on video.webkitSupportsPresentationMode. I dont want to test for iphone, how can i test if this feature is not supported? – Toniq Nov 24 '18 at 22:28
  • @Toniq tbh I never really have thinking about that. I write back later with a answer – TheCrazyProfessor Nov 25 '18 at 07:53
  • @Toniq okay so I have been looking for any reason why it's still show the PiP on iPhone, and I begin to be afraid that it's a bug in Safari on IOS as the iPad do support it and not the iPhone, as far I can see site like Vimeo use device detection to prevent it from viewing on iPhones. I have asked Apple Developer team about this and I will write back what they say as soon as I get a answer – TheCrazyProfessor Nov 25 '18 at 19:29