Radiant Media Player

PiP mode (Picture-in-Picture)



Documentation sections


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 as of September 2020:

  • Desktop Chrome, MS Edge, Firefox (1), Safari
  • iOS 14+ Safari and iPadOS Safari
  • Chrome for Android 8+ (2)

(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. Note that hlsJSCapLevelToPlayerSize and shakaCapLevelToPlayerSize are automatically set to false when pip setting is set to 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/5.10.2/js/rmp-hlsjs.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
  // HLS streaming source
  var src = {
    hls: 'https://your-live-hls-url.m3u8'
  };
  // Your player settings
  var 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'
      ]
    }
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  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.