Radiant Media Player

Autoplay support



Introduction

Autoplay (or autostart) allows media content, or a linear video ad unit in case of pre-roll, to start without the need for a user interaction, this is most of the time when page loads.

Radiant Media Player provides support for autoplay of content or pre-roll video ad with live, DVR & on-demand streaming. Autoplay works with all supported streaming protocols (HLS, DASH or progressive download). Autoplay of outstream video ad unit is also supported. Here is our scope of support:

  • Desktop browsers: full autoplay support for content and pre-roll video ad unit
  • Mobile browsers: muted autoplay support for content and pre-roll video ad unit
  • Web-based mobile apps & WebViews: full autoplay support for content and pre-roll video ad unit

An example of implementation with video ads can be found here.


Player code example

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/4.4.4/js/rmp.min.js" 
  integrity="sha384-KfgOHL+uRs3rPCnZledCYzAuPc3+eu4j6DQzjQH8370JtLm2QhZzZSlZ4r9OfCtK"
  crossorigin="anonymous"></script>
<!-- Set up our container div with its unique id -->
<div id="rmpPlayer"></div>
<script>
// First we specify our streaming URL
var bitrates = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,  
  delayToFade: 3000,
  width: 640,
  height: 360,
  // This is the only required setting for autoplay
  // It will automatically enable autoplay on desktop browsers and muted autoplay on mobile browsers
  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://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Muted autoplay support in mobile browsers

With the release of iOS 10 and Chrome 53 on Android muted autoplay of HTML5 video has been introduced on mobile devices. Previously it was not possible to autoplay video content on iOS & Android browsers even muted. Radiant Media Player has supported muted autoplay for content since the release of iOS 10 and Chrome 53 for Android browsers. With the release of Google IMA SDK 3.164.0 we have also added muted autoplay support for video ads (version 4.0.19) on mobile devices. Muted autoplay of video ads is also possible with our own VAST parser rmp-vast. Autoplay with sound (e.g. not muted) is still not possible on iOS or Android browsers as of July 2017 and we do not expect this to change in the near future.

Our testing shows that muted autoplay of preroll video ads or video content works well in latest Safari & Chrome for iOS 10+ and latest Chrome & Firefox for Android 5+. Browsers like Samsung Internet or Opera for Android do not seem to provide direct support for muted autoplay and as such those browsers are unlikely to support this feature.


Feature detection of autoplay support

It is not enough for a desktop or mobile browser to exhibit support for autoplay through HTML5 video. It must also be able to actually autoplay the media content when requested. Changing device conditions and users settings can block autoplay on mobile or desktop devices. Thanks to our open source rmp-detect-autoplay script Radiant Media Player can safely enable effective autoplay where available. Here are the reasons why you should want to enable autoplay feature detection:

  • Good user experience: if a viewer or device block autoplay there may be a valid reason for that like specific accessibility requirements or data/energy saver mode enabled.
  • Do not waste bandwidth: when autoplay is blocked by the device/viewer it is likely the content/ad will start loading but will not render until a user interaction is detected likely causing a waste of bandwidth or inaccurate reporting.
  • Avoid technical issues: some autoplay blocking scripts or extensions may mess with advanced media applications and cause issues with resuming content when a user interaction happens.

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.

mutedAutoplayOnMobile: Boolean

In latest mobile browsers muted autoplay of content/pre-roll ad is supported. When both autoplay and mutedAutoplayOnMobile are set to true the player will use muted autoplay on mobile browsers. Setting mutedAutoplayOnMobile to false while autoplay is set to true will cause the player to only autoplay on desktop browsers. Default: true.

featureDetectAutoplay: Boolean

Autoplay support for a specific device does not mean the player can actually autoplay the content or the preroll ads at runtime. Changing device conditions and users settings can block autoplay on mobile or desktop devices. This setting enables feature-detection of autoplay support for the targeted device at player runtime. Default: true.
It should be noted that setting featureDetectAutoplay to false will force autoplay on the player and may result in a higher rate of autoplay but at the cost of a poorer experience for some viewers and wasted bandwidth on users/devices that block autoplay.

autoplayDetectionTimeout: Number

This setting is expressed in milliseconds and represents the time after which the player will stop trying to detect autoplay support (muted-autoplay on mobiles). If timeout is reached the player considers autoplay is not available. Most of the time the player will never reach this timeout as feature detection happens very fast before timeout is reached. Increasing this value may cause an increase accuracy for autoplay support detection but at the potential cost of slower player startup. If you target a market with older devices or where network conditions are known to be highly fluctuant or if you are using iframe embedding, you may consider increasing this setting. Default: 8000.

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