| Mobile | Tablet | Web | ||
|---|---|---|---|---|
This article introduces Native Picture-in-Picture for DIVA.
Topics covered here:
- What is Picture-in-Picture?
- Is PiP supported on all of DIVA's video player features?
- How is PiP activated?
What is Picture-in-Picture?
Picture-in-Picture (PiP) functionality displays a smaller floating video on top of another screen when switching apps or navigating away from a video.
PiP increases the visibility of multiple events simultaneously and is supported by the device’s operating system or browser. PiP is available for live and video-on-demand (VOD) content, including switch, modal (from a video list), and highlight videos.
Notes:
- PiP must be enabled in the project's Configuration file
- PiP functionality will not launch if the video content is paused, or if a playback error has occurred
- The PiP window closes automatically when the video content in PiP view ends
Is PiP supported on all of DIVA’s video player features?
DIVA supports Picture-in-Picture for live and VOD content on the following:
- Main player
- Modal view
- Switch mode
- Highlight's mode
Currently, PiP is not supported on the following due to platform support and screen space restrictions:
- Multi-angle clips
- Side-by-side view
- 360° videos
- Casting (Airplay and Chromecast)
Important: DIVA automatically closes the PiP window if transitioning from a regular view to an unsupported view, for example, 360° videos.
How is PiP activated?
Activating PiP is determined by the platform. Select an option below to learn how to activate PiP and view examples:
Select the PiP button (found in the bottom-right of the playback controls) of the video you want to shrink and view as a floating window on top of the primary video. The PiP window displays in the top-right corner of the primary full-screen video window.
Primary video and PiP mode example (Responsive desktop):
When hovering over the PiP video window, users can:
- Close the window via the close button
- Toggle between play and pause states
- Skip back/forward (depending on video states)
- Jump to live (depending on video states)
- Exit PiP mode and return to side-by-side mode via the side-by-side button
- Switch the video in the PiP player with the primary video via the switch button
Primary video and PiP mode hover state example (Responsive desktop):
PiP and menu panels
With the primary menu active, the PiP window displays in the top-right corner of the screen.
PiP with primary menu active example (Responsive desktop):
With the secondary menu active, the PiP window is pinned to the top of the right panel.
PiP with secondary menu active example (Responsive desktop):
Select the PiP button (found in the bottom-right of the playback controls) of the video you want to shrink and view as a floating window on top of the primary video. The PiP window displays in the top-right corner of the primary full-screen video window.
Primary video and PiP mode example (Responsive tablet):
Primary video and PiP mode example (Responsive mobile):
In the PiP window, users can:
- Close the window via the close button
- Toggle between play and pause states
- Skip back/forward (depending on video states)
- Jump to live (depending on video states)
- Exit PiP mode and return to side-by-side mode via the side-by-side button
- Switch the video in the PiP player with the primary video via the switch button
Primary video and PiP mode hover state example (Responsive tablet):
Primary video and PiP mode hover state example (Responsive mobile):
PiP and menu panels
With the primary menu active, the PiP window displays in the top-right corner of the screen.
PiP with primary menu active example (Responsive tablet):
PiP with primary menu active example (Responsive mobile):
With the secondary menu active, the PiP window is pinned to the top of the right panel.
PiP with secondary menu active example (Responsive desktop):
PiP with secondary menu active example (Responsive mobile):
Tap the icon to contract the full-screen view
Once active, the PiP window displays on the top layer of the screen with a confirmation message.
Responsive mobile controls
- Drag the PiP window to the desired location
- Tap the
/
toggle to control video playback
- Tap the seek
/
icons to skip back or forward in 15-second increments. The seekbar highlights the content duration.
- Tap the
icon to enter the full-screen view, closing the PiP window
- Tap the
icon to dismiss the PiP window, saving the contents resume point
Known issues:
PiP does not support the following features: midroll advertisements, Multi-angle clips, Side-by-side view, and 360° videos. If PiP view is selected from any of the above, it is immediately closed.
To activate PiP (iOS mobile and tablet) and consume content on a smaller floating window, either:
- Navigate away from the integrated application while playing a video
- Switch apps while playing a video
Once active, the PiP window displays on the top layer of the screen.
iOS controls
- Drag the PiP window to the desired location
- Tap the
- Tap the seek
- Tap the
- Tap the
Known limitations:
- Users can seek temporarily outside of the trimmed area
- The seekbar shows the full length of the video (untrimmed)
- The seekbar and seek buttons are visible for PiP and live videos
- On iPadOS, PiP is only launched if the video is in the full-screen view
Note: PiP functionality is not currently available for responsive web Android or AndroidTV.
To activate PiP (Android mobile and tablet) and consume content on a smaller floating window, either:
- Navigate away from the integrated application while playing a video
- Switch apps while playing a video
Once active, the PiP window displays on the top layer of the screen.
Android controls
- Drag the PiP window to the desired location
- Tap the
- Tap the seek
- Tap the
icon to enter the full-screen view, closing the PiP window. The video transitions smoothly back to the full-screen video while playing the video content.
- Tap the
icon to manage the integrated application's PiP settings
- Tap the