Viewable Feature

When player becomes visible do ...

Important update: with the release of macOS 10.14.4 and iOS 12.2 the Intersection Observer API is finally available in Apple devices (and thus our viewable feature as well)!

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 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

Viewable API

Viewable API method

getPlayerVisible()

Returns Boolean stating if the player is in view or not (based on viewableThreshold)

Viewable API events

playerinview

Fires when player appears into view

playeroutofview

Fires when player becomes out of view

Implementation example

See Radiant Media Player viewable feature at work here.