PiP mode (Picture-in-Picture)

Scope of support

Picture-in-Picture (PiP) allows users to watch videos in a floating window (always on top of other windows) so they can keep an eye on what they're watching while interacting with other sites, or applications. With the new Picture-in-Picture Web API, you can initiate and control Picture-in-Picture for video elements on your website. With Radiant Media Player, this is made available as a player module.

We support PiP in the following environments:

• Desktop Chrome, MS Edge, Firefox ⁽¹⁾, Opera and Safari
• iOS 14+ Safari and iPadOS Safari
• Chrome for Android 8+ ⁽²⁾
• iOS 14+ WebView

We do not support PiP in the following environments:

• Android 5+ WebView

(1) Version 71+ of FireFox allows for a FireFox-specific picture-in-picture mode that we do support (known limitation for FireFox PiP is that it is not available after playing a Google IMA linear ad).

(2) Chrome for Android automatically plays Picture-in-Picture video on mobile with the release of Android 8 using a native Android API. It allows users to play a <video> element in a small overlay window that isn't blocked by other windows, so that they can watch while doing other things. Here's how it works: open Chrome for Android, go to a website that contains a video and play it fullscreen. From there, press the Home button to go to your Android Home Screen and the playing video will automatically transition to Picture-in-Picture.

Player settings

pip: Boolean

Enables or not picture-in-picture module. Default: true.

Player code example - see this example here

<!-- Include Radiant Media Player - here we use the optimised build for hls.js -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/js/rmp-hlsjs.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
  // HLS streaming source
  const src = {
    hls: 'https://your-live-hls-url.m3u8'
  };
  // Your player settings
  const settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    // Enables picture-in-picture module
    pip: true, 
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const rmp = new RadiantMP('rmp');
  rmp.init(settings);
</script>

Player API PiP events

The following events only fire when using the Picture-in-Picture Web API (e.g. not when using Safari)

enterpictureinpicture

Fires when player enters picture-in-picture mode.

leavepictureinpicture

Fires when player exits picture-in-picture mode.