How to Enable PiP in Custom HTML5 Video Controls for Safari

Question

I'm working on integrating the Picture-In-Picture (PiP) feature into a custom HTML5 video player. With the introduction of PiP support in Safari 9 (announced at WWDC15), I aim to enhance the user experience on my website.

Here's the challenge: While Safari's default video controller includes a PiP button, I need to understand how to activate this feature programmatically using JavaScript for custom video controls.

During WWDC15, it was mentioned that:

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

However, specific instructions or documentation on implementing this were not provided.

What I need help with:

1. How can I enable PiP in custom HTML5 video controls specifically for Safari?
2. Are there any examples or documentation available that demonstrate the integration of PiP using the JavaScript Presentation Mode API in custom controls?

Any guidance or resources would be greatly appreciated!

Childlike

Answer 1

To activate the Picture-in-Picture (PiP) feature programmatically in your custom HTML5 video player using JavaScript, you'll need to use the JavaScript Presentation Mode API. You can find more detailed information on PiP in the W3C Picture-in-Picture specification.

Here are the steps to integrate PiP into your HTML5 video player with custom controls:

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

Firstly, include a button in your HTML that users can click to trigger PiP mode.

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

2. Implement JavaScript Functionality for the Button

You'll need to write JavaScript to handle the PiP functionality when this button is clicked. This involves using the requestPictureInPicture method and handling the associated logic.

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

// Check if PiP is supported
if (document.pictureInPictureEnabled) {
    pipButton.addEventListener("click", async () => {
        try {
            if (video !== document.pictureInPictureElement) {
                // Request PiP
                await video.requestPictureInPicture();
            } else {
                // Exit PiP
                await document.exitPictureInPicture();
            }
        } catch (error) {
            console.error("PiP Error:", error);
        }
    });
} else {
    pipButton.disabled = true;
}

This code checks if PiP is enabled in the browser and adds an event listener to the PiP button. When clicked, it either requests or exits PiP mode, based on the current state.

Additional Resources

• Safari 9 Release Notes - Picture-in-Picture: Provides details specific to Safari's implementation of PiP.
• Adding Picture-in-Picture to Safari Media Controls: A guide on integrating PiP into Safari's media controls, which might offer some insights for your custom solution.

Childlike

@Toniq Sadly iPhones dosn’t have support for picture-in-picture – Childlike

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? – Southpaw

@Southpaw tbh I never really have thinking about that. I write back later with a answer 😊 – Childlike

@Southpaw 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 – Childlike

@Southpaw forgot to mention that iOS now does have PIP – Childlike