Radiant Media Player

Autoplay



Documentation sections


Autoplay scope of support in Radiant Media Player

TL;DR with the release of desktop Chrome 66 and Safari 11 autoplay with sound is becoming widely unavailable or restricted in the web industry. If you plan on using autoplay, we recommend using a unified muted autoplay approach which works well on mobile and desktop. Muted autoplay in Radiant Media Player can be achieved by using autoplay and muted settings set to true.

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. On modern mobile devices autoplay with audio is not available but muted autoplay can be used.

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. With Radiant Media Player muted autoplay can be achieved by using autoplay and muted player settings to true. Autoplay with audio remains available in some desktop browsers but it is likely to be increasingly blocked in the short-to-mid term future. You can check our compatibility table for more information on the subject.

Radiant Media Player is equipped with various detection and fallback mechanisms to insure your content remains watch-able whether you are using autoplay or not. When autoplay is requested but blocked by the browser (or another interfering mechanism), the player will gracefully provide a play icon to start content. We regularly test our player against Chrome 66+, Firefox (w/ media.autoplay.enabled set to false) and macOS Safari 11+ autoplay interference engines.

The below player settings can help fine tuning your autoplay set up.

Note about un-muting: these new policies in Chrome 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 example

Unified muted autoplay (mobile + desktop) - recommended for best cross device support

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.0.3/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+ 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>

Autoplay with sound where possible and fallback to muted autoplay

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/5.0.3/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
  // 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>

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 the player will attempt to detect what kind of autoplay mode is allowed on the targeted devices. Default: true. As of July 2018 these are the supported autoplay mode by main environments:

  • Autoplay with sound: Firefox, MS Edge, Internet explorer 11, desktop Chrome 65-, macOS Safari 10-, Electron apps, Cordova apps
  • Muted autoplay: iOS Safari 10+, Chrome (Firefox and Samsung Internet 7+) for Android, desktop Chrome 66+, macOS Safari 11+, HTTP WebView (Facebook in-app browser)
  • No autoplay: iOS Safari 9-, Samsung Internet 6- for Android

Despites the player best guess the viewer may have browser settings or add-ons simply preventing all kind of autoplay. This will only be known to the player after attempting to play content. The player will fire API autoplay events accordingly.

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.


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 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.