Autoplay Considerations

In this topic, you will learn about issues surrounding autoplaying a video on page load.

Overview

Using Brightcove Player to autoplay a video when a page loads is not a simple issue. This stems from browser vendors responding to user wishes to NOT have videos autoplay. This document will detail the current state of autoplaying videos in various browsers and Brightcove Player configurations that affect autoplay.

We have a set of test cases available.

Bottom line

If you just want our best advice, without the details:

Autoplay without Client-side Ads

These steps will provide the best chance for successful automatic playback in players without client-side ads or with SSAI:

  • Set autoplay to "any"
  • Set playsinline to true (for iPhones)

Autoplay with Client-side Ads

Autoplay settings vary depending on the version of the IMA plugin that you are using, or if you are using FreeWheel.

IMA3 (latest)

These steps will provide the best chance for successful automatic playback in players with client-side ads (IMA3 plugin v4):

  • Set autoplay to "any"
  • Set playsinline to true (for iPhones)
  • Configure the advertising plugin via the player's JSON configuration, not via side-loading or custom bundling

IMA3 v3 or FreeWheel

These steps will provide the best chance for successful automatic playback in players with client-side ads (IMA3 v3 or FreeWheel):

  • Set autoplay to true
  • Set playsinline to true (for iPhones)
  • Configure the advertising plugin via the player's JSON configuration, not via side-loading or custom bundling

Configuring Autoplay

The Brightcove Player supports four possible values for autoplay. In the HTML5 spec, autoplay is a boolean attribute - it is either on (true) or off (false). In the Brightcove Player, we have two special values available:

  • Do Not Auto-Play: The Brightcove Player will not call play() until the viewer clicks the play .
  • Auto-Play: This will cause the Brightcove Player to call play() when a source is set.
  • Auto-Play Muted: This will cause the Brightcove Player to mute the player and call play().
  • Auto-Play, muted if blocked: This will cause the Brightcove Player to call play(). If that fails, it will mute the player and call play() again.

These three values are not supported in tag attributes!

Priority

The following list describes all the ways autoplay can be configured and how they are prioritized in the Brightcove Player's initialization process.

  1. Video Element Attribute

    Following the HTML5 standard, this can either be true (attribute exists) or false (attribute does not exist).

    Unlike other properties where the query param values (iframes only in other cases) win, the attribute wins here because it wins in Video.js.

    <video-js autoplay controls></video-js>
  2. URL Hash or Query String

    Unlike most cases, the autoplay query string parameter or URL hash parameter is respected for ALL types of embeds for backward compatibility reasons.

    This should be removed for in-page embeds in a future major release.

    Parameter existence is equivalent to true, i.e. ?autoplay&foo=bar, but string values are supported, e.g. ?autoplay=muted&foo=bar

    You cannot set autoplay to false via query/hash param!

  3. videojs()/bc() Options

    The autoplay option can be passed to the bc() function.

  4. JSON configuration

    If autoplay is not available in options, use any value passed in from the player's JSON configuration.

  5. Default

    Finally, if none of the above apply, we default to false.

Browser Settings and Policies

Browsers have gotten more consistent in recent years, but the following sections summarize each major browser's available settings and/or policies.

Safari (macOS)

Safari on macOS has these settings:

  • Allow All Auto-Play
  • Stop Media with Sound (default)
  • Never Auto-Play

Additionally, these settings can be changed on a per-site basis.

Safari (iOS and iPadOS)

Safari on iOS and iPadOS do not have user-facing autoplay settings, but implements the following policies:

  • Muted autoplay will always work
  • Autoplay with sound requires user gesture
  • On iPhone, the playsinline attribute is required in all cases.

Read this WebKit blog post for more specifics.

Chrome

Chrome does not have user-facing autoplay settings, but implements the following policies:

  • Muted autoplay should always work - but that is always up to the browser; we have encountered a few edge cases where it does not, but we have no control over them.
  • Autoplay with sound requires user gesture or a high enough MEI (on desktop).

Read this Chrome blog post for more specifics.

Firefox

Firefox has these settings both globally and per website:

  • Allow Audio and Video
  • Block Audio (default)
  • Block Audio and Video

Edge

By default, Edge has these settings:

  • Allow (default)
  • Limit

However, by going to edge://flags/#edge-autoplay-user-setting-block-option, the option to Block autoplay that was available in Edge (Legacy) can be restored.

Edge (Legacy)

Edge (Legacy) had these settings:

  • Allow
  • Limit
  • Block

The Limit option is similar to other browsers in that it requires muted autoplay or a user gesture.

Known issues

In-Page Sources and Programmatic Autoplay

There is a known issue when using in-page sources (e.g. via a <source> element) and calling play().

This has been seen in Firefox, but it may be present in other browsers.

This is not a common use-case for Brightcove customers. Because Video Cloud sources are loaded after player creation, this issue does not occur.

Instead, you must wait for the canplay event to fire before calling play(). Alternatively, configuring autoplay: true will work as expected, depending on user settings/preferences.

IMA3/FreeWheel

Missing or Faulty Prerolls

If attempting to call play() with these plugins, there are cases where autoplay will fail and, when the play button is clicked, no preroll will play.

With FreeWheel, there have also been reports of prerolls playing behind the big play button.

Recommendation

When using these plugins, the recommended method of enabling autoplay is:

  • Bundle the plugin into your player (e.g. via Studio). Side-loading (in-page) is not recommended.
  • Do not attempt to use the special autoplay values. Set autoplay to true and allow the ad plugin to attempt playback however it can.