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 5.0.12 we have added native support for the Picture-in-Picture Web API, this is made available as a player module.

As of December 2018 the PiP module is available for latest Chrome, Opera and Vivaldi for Desktop.

With version 5.1.5 of Radiant Media Player we have added support for PiP in latest Safari for Desktop and iPad.

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. This Android 8+ PiP feature is also supported with Radiant Media Player.


Player settings

pip: Boolean

Enables or not picture-in-picture module. Default: false. 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.5.5/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, 
    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.

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