Radiant Media Player

Autoplay



Documentation sections


Autoplay scope of support in Radiant Media Player

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 Cordova-based or Electron-based 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.


Player code examples

Autoplay with sound where possible and fallback to muted autoplay - live example here

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.3.0/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<script>
// Your streaming source - HLS in this example
var src = {
  hls: 'https://your-hls-url.m3u8'
};
// Your player settings
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  // detectAutoplayCapabilities is enabled by default
  // when muted is not set, it will cause the player to attempt autoplay with sound first
  // and only use muted autoplay as a fallback - this detection is transparent for the users
  // setting detectAutoplayCapabilities to false will enable brute force autoplay - which is not recommended
  detectAutoplayCapabilities: true,
  autoplay: true,
  poster: 'https://your-poster-url.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Unified muted autoplay (mobile + desktop)

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.3.0/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmpPlayer"></div>
<script>
// Your streaming source - HLS in this example
var src = {
  hls: 'https://your-hls-url.m3u8'
};
// Your player settings
var settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  // Since Chrome 66+, Firefox 66+ and Safari 11+ autoplay with sound is blocked by default on page load
  // We thus recommend using a unified muted autoplay approach that works well on both desktop and mobile
  muted: true,
  autoplay: true,
  // To enable autoplay of video ads just add ad-related settings
  // ads: true,
  // adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/inline-linear.xml',
  poster: 'https://your-poster-url.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Mobile/browser modes that could prevent autoplay

Low power mode on iOS 11+

According to our testing when an iOS 11+ device is in low power mode autoplay even muted is forbidden by the OS. This does not apply to iOS 10 and below. Radiant Media Player will properly handle autoplay requests when low power mode is engaged in iOS 11+ 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-related player settings

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.

detectAutoplayCapabilities: Boolean

The player knows 3 autoplay mode: autoplay with sound, muted autoplay or no autoplay. When autoplay is enbaled and detectAutoplayCapabilities is set to true, the player will attempt to detect what kind of autoplay mode is allowed on the targeted devices, starting with autoplay with sound, then muted autoplay and finally no autoplay (in which case a play icon is made available to the user to explicitly start playback). Default: true.

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.


Autoplay API events

autoplaysuccess

This API event will fire when autoplay is set to true and autoplay of content or pre-roll ad was a success.

autoplayfailure

This API event will fire when autoplay is set to true and autoplay of content or pre-roll ad was a failure (likely due to an autoplay interference engine).


Autoplay API methods

resetAutoplayCount

Reset autoplay count set through the autoplayCount setting.


Autoplay policy for iframes

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"
  src="http://www.mydomain.com/embedded-player.html"
  style="border:none;"
  allowfullscreen
  allow="autoplay; fullscreen"></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.

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