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.
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:
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):
- Configure the advertising plugin via the player's JSON configuration, not via side-loading or custom bundling
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
any: This will cause the Brightcove Player to call
play(). If that fails, it will mute the player and call
These three values are not supported in tag attributes!
The following list describes all the ways autoplay can be configured and how they are prioritized in the Brightcove Player's initialization process.
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>
- 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
?autoplay&foo=bar, but string values are supported, e.g.
You cannot set autoplay to
falsevia query/hash param!
The autoplay option can be passed to the
If autoplay is not available in options, use any value passed in from the player's JSON configuration.
Finally, if none of the above apply, we default to
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 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
playsinlineattribute is required in all cases.
Read this WebKit blog post for more specifics.
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 has these settings both globally and per website:
- Allow Audio and Video
- Block Audio (default)
- Block Audio and Video
By default, Edge has these settings:
- Allow (default)
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) had these settings:
The Limit option is similar to other browsers in that it requires muted autoplay or a user gesture.
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 -
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.
Autoplay String Values
The special string-based autoplay values -
"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.
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
trueand allow the ad plugin to attempt playback however it can.