Radiant Media Player

PiP mode (Picture-in-Picture Web API)BETA



Documentation sections


Scope of support

PiP mode (Picture-in-Picture Web API) in Radiant Media Player is currently in BETA

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.

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

<!-- Include Radiant Media Player - here we use the optimised build for hls.js -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.1.2/js/rmp-hlsjs.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
  // Live 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

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.