TL;DR with the release of desktop Chrome 66+, Firefox 66+ and Safari 11+ autoplay with sound is becoming widely unavailable or restricted in the web industry. Our player will automatically detect which autoplay mode is available (with sound, muted or no autoplay) based on device capabilities and user settings. On mobile devices (iOS, Android) autoplay with sound is never available, only muted autoplay is possible.
Autoplay (or autostart) allows media content or pre-roll advertisement to start without the need for a user interaction - most of the time autoplay happens when page loads.
Radiant Media Player provides support for autoplay of media content or pre-roll advertisement with live, DVR & on-demand streaming. Autoplay works with all supported streaming protocols (HLS, DASH or progressive download). Autoplay of outstream video ads is also supported.
Years of autoplay with sound misusage in the industry have caused viewers to grow weary of autoplaying video with sound. Major actors in the industry have picked up on this trend and new autoplay policies are being rolled out into major browsers and devices. Those new policies tend to limit autoplay capabilities while pointing at muted autoplay as the new standard for autoplaying video content, be it for mobile or desktop devices. Desktop Safari 11+ and Firefox 66+ will allow for exceptions for autoplay with sound to run, on a site-by-site basis: those exceptions need to be set by the user through browser settings. On Desktop Chrome 66+, Chrome may allow for autoplay with sound to run based on Chrome Media Engagement Index (MEI): in short, frequently visited sites by the user will allow autoplay with sound, while other sites will be restricted to muted autoplay.
In Ionic, Flutter, Electron or Apache Cordova applications autoplay with sound is generally allowed but you may need to insure your application is compiled with the related appropriate settings for autoplay.
The below player settings can help fine tuning your autoplay set up.
Note about un-muting: these new autoplay policies in Chrome 66+, Firefox
66+ and Safari 11+ also affect un-muting of video content
or video ads. Specifically a mouseenter or mouseover event is
not enough anymore to
un-mute content if the user has not interacted with document prior to un-muting (this
would cause the player
to pause and throw a warning in the browser console). A full click or
touchend event is now required.
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/9.15.16/js/rmp.min.js"></script> <!-- Player container element --> <div id="rmp"></div> <script> // Your streaming source - HLS in this example const src = { hls: 'https://your-hls-url.m3u8' }; // Your player settings const settings = { licenseKey: 'your-license-key', src: src, width: 640, height: 360, // Enables autoplay // Player will automatically detect which autoplay mode is supported in the targeted environment autoplay: true, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); rmp.init(settings); </script>
Low power mode on iOS 12+
According to our testing when an iOS 12+ device is in low power mode autoplay even muted is forbidden by the OS. Radiant Media Player will properly handle autoplay requests when low power mode is engaged in iOS 12+ by providing a play button to initiate playback (a user interaction will be needed in such case as autoplay would have failed).
Data saver mode on Chrome before version 66 for Android
When data saver mode is enabled on Chrome before version 66 for Android autoplay even muted is forbidden by the OS. Note that this only applies to non-https web pages so on an https site (which should be the norm by now) autoplay won't be affected by data saver mode (meaning that muted autoplay will work as usual).
autoplay: Boolean
Command the player to autoplay content when init method is called. This works for media
content and video ads. On
modern mobile devices muted autoplay is supported for media content and video ads.
Default: false.
requestAutoplayCapabilitiesData: Boolean
When autoplay is set to false you may still have a
need to know the autoplay
capabilities of a specific
environment. For example you may want to call play method on the player
programmatically without a user
interaction. In that case you could want to know which autoplay mode is available through
the
getAutoplayMode method to mute the player before calling play (when muted
autoplay is only available)
to reach a successful play. Setting this setting to true will allow
getAutoplayMode to return
an accurate value of device capabilities when autoplaymodedetected API event
fires even when
autoplay is false.
Default: false.
detectAutoplayTimeout: Number
Timeout in milliseconds for autoplay to force complete checking.
Default: -1 (2500ms in desktop environment, 5000ms in
mobile environment).
srcChangeAutoplay: Boolean
When using the setSrc API method this setting allows to control
the behaviour of player after srcchanged event has fired. When set
to true this setting will cause content to autoplay just after srcchanged
event. When set to false the player will remain in a pause state after
srcchanged
event. Default: true. When set to true this setting will
only have effect after player
has been initialised either through a valid user interaction or successful autoplay
request.
This setting is also compatible with playlist/related but when
srcChangeAutoplay is set to false the playlistUpNextAutoplay
and relatedUpNextAutoplay settings are automatically
set to false.
autoplayCount: Number
Limits the number of autoplay across browser sessions (using localStorage).
You may use the resetAutoplayCount API method to reset
autoplayCount.
Default: Infinity.
autoplaysuccess
This API event will fire when autoplay setting is set
to true and autoplay
of
content or pre-roll
ad was a success.
autoplayfailure
This API event will fire when autoplay setting is set
to true and autoplay
of
content or pre-roll ad
was a failure (likely due to an autoplay interference engine).
autoplaymodedetected
This API event will fire when player has finished to evaluate the
autoplay mode supported by the targeted device. Use
getAutoplayMode API method to get value of that autoplay mode.
getAutoplayMode()
Returns the autoplay mode detected by the player. This method should be queried upon
autoplaymodedetected event. Returns values are:
'unresolved', 'no-autoplay',
'muted-autoplay', 'autoplay-with-sound'.
resetAutoplayCount()
Reset autoplay count set through the autoplayCount
setting.
With the release of Chrome 65 autoplay of HTML5 video content in an iframe has been disabled by default. It must be enabled through autoplay feature policy. This change in autoplay policy for iframes means that an iframe holding an HTML5 video player needs to be explicitly allowed to autoplay by the parent window. This is the same in principle as what we have done in the past for allowing an iframe to go fullscreen. If you are using an iframe within an iframe then each iframe needs to be explicitly allowed to autoplay. Note that autoplay is allowed by default on same-origin iframes so enabling autoplay feature policy is only required for cross-origin iframe. Example:
<iframe width="640" height="360" title="Video content" src="http://www.mydomain.com/embedded-player.html" style="border:none;" allowfullscreen sandbox="allow-scripts allow-presentation allow-same-origin" allow="autoplay; fullscreen; picture-in-picture; xr-spatial-tracking; encrypted-media; clipboard-write"></iframe>
We have tested this set-up when Radiant Media Player is used in an
iframe and can confirm this is generally working for
Chrome 65+. It is likely other browsers will implement this feature as well in the
near future. In case autoplay is blocked due to autoplay feature policy Radiant Media
Player
shall provide a play button so that playback can be initiated by a
user gesture, in such case the autoplayfailure API event shall fire. You
should
also note the need to use the allowfullscreen attribute in complement to the
allow attribute in order to support browsers that do not support
allow attribute.
If you are using amp-iframe and autoplay you need to add
allow="autoplay" to your amp-iframe element.
©2015-2024 Radiant Media Player. All Rights Reserved.