Radiant Media Player

Viewable feature

Documentation sections

When player becomes visible do ...

Historically, detecting visibility of an element in a web page, in this case a media player, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. Playing video on a web page is never not-taxing: it affects load page performance, consumes more client-bandwidth, drains battery life faster ... Thus the need to detect when a video player comes into view (e.g. becomes visible to the viewer) is important to increase viewer experience and reduce resources usage.

Thanks to the Intersection Observer API, detecting when an element becomes visible is now reliable and affordable on a resource point of view. With Radiant Media Player 4.7.1, we have built support for the Intersection Observer API directly into player. Enabling it can be done in a snap.

The Intersection Observer API is available in most modern browsers (it is to be noticed though that support is still not available in macOS/iOS Safari as of March 2018) and also works when the player is used through an iframe.

Player settings

viewableAutoplay: Boolean

Enables visibility detection and once the player becomes visible request autoplay. On mobile devices and latest macOS Safari only muted autoplay will be available. Default: false.

viewablePlayPause: Boolean

Enables visibility detection and once the player becomes visible request play (autoplay on first visibility) - when player is not visible anymore pause player allowing for less resources usage. Default: false.

viewableThreshold: Number

The threshold upon which the player is considered visible in the viewport. By default the player is considered visible when half (e.g. 0.5) of its surface is visible. Default: 0.5.

Implementation example

See Radiant Media Player viewable feature at work here.

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