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.
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
The viewable API is available regardless of viewableAutoplay or viewablePlayPause settings enabled or not
getPlayerVisible()
Returns Boolean stating if the player is in view or not (based on viewableThreshold)
playerinview
Fires when player appears into view
playeroutofview
Fires when player becomes out of view
See Radiant Media Player viewable feature at work here.
©2015-2024 Radiant Media Player. All Rights Reserved.