How to enable picture in picture in custom ui?

Support
, , , ,
1

Product

Player

Question

I’m creating a custom ui for my bitmovin player and I need to add the picture in picture button, I tried this:

new ControlBar({
 components: [
/*Other components*/
new Container({
 components: [
/*Other components*/
    new PictureInPictureToggleButton()
      ]
    })
   ]
})

But the button is never shown.

2

@carlos.salmanca The PictureInPictureToggleButton component checks the player viewMode to determine PIP support, which currently returns not available, causing the button to be hidden. You can enable/disable PIP using the native browser APIs. Here is a sample implementation.

let pipButton = new bitmovin.playerui.ToggleButton({ cssClass: 'ui-piptogglebutton' });
  pipButton.onClick.subscribe(async function () {
      try {
          if (videoElement !== document.pictureInPictureElement) {
              await videoElement.requestPictureInPicture();
          } else {
              await document.exitPictureInPicture();
          }
      }
      catch (error) {
          console.log('' + error);
      }
 });

let controlBar = new ControlBar({
 components: [
/*Other components*/
new Container({
 components: [
/*Other components*/
    pipButton,
      ]
    })
   ]
})

You can find the working sample here - bitmovin-player-web-samples/webapi-pip/index.html at main · bitmovin/bitmovin-player-web-samples · GitHub

3

@carlos.salmanca @Kishore since player version 8.166.0, Picture-in-picture is fully supported on major browsers: Release Notes Web: 8.166.0

If your browser supports PIP APIs (like Chrome or Safari), the button will just show up in your original example @carlos.salmanca (using player 8.166.0 or newer). This is the recommended approach.

Please note that Firefox is the odd one out, they chose to not implement the official API: HTMLVideoElement API: requestPictureInPicture | Can I use... Support tables for HTML5, CSS3, etc
Instead, Firefox might render its own PIP-button, unfortunately.

1 Like