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.
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
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-2023 Radiant Media Player. All Rights Reserved.