Documentation

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 (1), Opera and Safari
  • iOS 14+ Safari and iPadOS Safari
  • Chrome for Android 8+ (2)
  • 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.14.1/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.

Automatic picture in picture mode on scrolling

See our examples on GitHub here.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2024 Radiant Media Player. All Rights Reserved.