support Contact Support | system status System Status
Page Contents

    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

    These steps will provide the best chance for successful automatic playback in players with client-side ads (IMA3 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 five possible values for autoplay. In the HTML5 spec, autoplay is a boolean attribute - it id either on (true) or off (false). In the Brightcove Player, we have three special values available:

    • play: This will cause the Brightcove Player to call play() when a source is set.
    • muted: This will cause the Brightcove Player to mute the player and call play().
    • any: 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 will always work
    • 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.

    IE11

    IE11 has no autoplay settings or policy. Autoplay should work in all cases.

    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() or using string-based autoplay values - "play", "muted", and "any".

    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

    Autoplay String Values

    The special string-based autoplay values - "play", "muted", and "any" - are not currently supported in conjunction with the IMA3 and FreeWheel plugins.

    However, these plugins have their own autoplay handling in place and, when autoplay: true is configured, they will behave as if autoplay: "any" were configured.

    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.

    Page last updated on 23 May 2020