Viewable Feature

When player becomes visible do ...

Our viewable feature is available thanks to the Intersection Observer API. This API helps to detect when an HTML element becomes visible in reliable and resource-friendly manner. The Intersection Observer API is available in most modern browsers and also works when the player is used in an iframe.

Player settings

viewableAutoplay: Boolean

When the player becomes visible to the viewer start playback. On some devices only muted autoplay will be available. Default: false.

viewablePlayPause: Boolean

When the player becomes visible to the viewer request play (autoplay on first visibility) - when player is no longer visible to the viewer 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

The viewable API is available regardless of viewableAutoplay or viewablePlayPause settings enabled or not

Viewable API method

playerVisible getter (Boolean)

const playerVisible = rmp.playerVisible;

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.