Documentation

Viewable Feature

When player becomes visible do ...

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 sharpen viewer experience and reduce resources usage.

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

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.

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

©2015-2024 Radiant Media Player. All Rights Reserved.