The simplest way to automatically play content is to add the
autoplay
attribute to your
<audio>
or
<video>
element, which sets the
autoplay
property on the element to
true
.
When
autoplay
is
true
, the media will automatically begin to play as soon as possible after the following have occurred:
- The page is allowed to use autoplay functionality
- The element has been created during page load
- Enough media has been received to begin playback and continue to play through to the end of the media without interruption, assuming there are no dramatic changes in network performance or bandwidth.
Example: The autoplay attribute
An
<audio>
element using the
autoplay
attribute might look like this:
<
audio
id
=
"
musicplayer
"
autoplay
>
<
source
src
=
"
/music/chapter1.mp3
"
/>
</
audio
>
Example 2: Detecting whether autoplay is allowed
If autoplay is important for your application, you may need to customize behavior based on whether or not autoplay is allowed, disallowed, or only supported for inaudible content.
For example, if your application needs to autoplay a video and you know that the page only allows the autoplay of inaudible content, you can either mute it or supply a video with no audio track.
Similarly, if you know that autoplay is not allowed at all, you might provide a default image for the video (using the
poster
attribute), or choose to defer loading the video until it is requested.
The
Navigator.getAutoplayPolicy()
method can be used to check the autoplay policy for a type of media feature (i.e. all media elements, or all audio contexts) in a document, or to check whether a specific media element or audio context can autoplay.
The example below shows how you pass the
mediaelement
string to get the autoplay policy for all media elements in the document (pass
audiocontext
to get the policy for audio contexts).
The code assumes
video
is an
HTMLVideoElement
media element using the
<video>
tag or
HTMLVideoElement
, and that it is configured to autoplay with audio by default.
If autoplay is only allowed for inaudible content, we mute the audio; if autoplay is disallowed, we make sure that a placeholder image is displayed for the video.
if
(
navigator
.
getAutoplayPolicy
(
"mediaelement"
)
===
"allowed"
)
{
}
else
if
(
navigator
.
getAutoplayPolicy
(
"mediaelement"
)
===
"allowed-muted"
)
{
video
.
muted
=
true
;
}
else
if
(
navigator
.
getAutoplayPolicy
(
"mediaelement"
)
===
"disallowed"
)
{
video
.
poster
=
"http://example.com/poster_image_url"
;
}
The code to test a specific element or audio context is the same, except that you pass in the element or context to test rather than the type string.
Here we pass in the
video
object we want to test.
if
(
navigator
.
getAutoplayPolicy
(
video
)
===
"allowed"
)
{
}
else
if
(
navigator
.
getAutoplayPolicy
(
video
)
===
"allowed-muted"
)
{
video
.
muted
=
true
;
}
else
if
(
navigator
.
getAutoplayPolicy
(
video
)
===
"disallowed"
)
{
video
.
poster
=
"http://example.com/poster_image_url"
;
}
The autoplay policy for a type may change due to user interaction with the site, page, or a particular element.
Similarly, on some browsers the policy for a specific element might change even though the policy for the type has not (for example, on browsers where touching a particular element can allow just that element to autoplay).
As there is no way to be notified when the autoplay policy has changed (either for a type or element), generally we recommend that the policy is checked when the page is loaded, using the type.
Example 3: Detecting autoplay failure as a fallback
No specific event (or other notification) is triggered by autoplay success or failure, so browsers that do not support
Navigator.getAutoplayPolicy()
have no easy way to determine if autoplay is supported, or to react when it is triggered or not triggered.
One approach is to listen for the first instance of the
play
event, which is fired on the media element when is resumed after being paused
and
when autoplay occurs.
That means that the first time the
play
event is fired, you know your media is being started for the first time after the page is opened,
Consider this HTML for a media element:
<
video
src
=
"
myvideo.mp4
"
id
=
"
video
"
autoplay
>
</
video
>
Here we have a
<video>
element whose
autoplay
attribute is set and with a
play
event handler set up; the event is handled by a function called
handleFirstPlay()
, which receives as input the
play
event.
handleFirstPlay()
looks like this:
const
video
=
document
.
getElementById
(
"video"
)
;
video
.
addEventListener
(
"play"
,
handleFirstPlay
,
false
)
;
let
hasPlayed
=
false
;
function
handleFirstPlay
(
event
)
{
if
(
!
hasPlayed
)
{
hasPlayed
=
true
;
const
vid
=
event
.
target
;
vid
.
removeEventListener
(
"play"
,
handleFirstPlay
)
;
}
}
After getting a reference to the video element from the
Event
object's
target
, we use it to remove the event listener.
This will prevent any future
play
events from being delivered to the handler. That could happen if the video is paused and resumed by the user or automatically by the browser when the document is in a background tab.
At this point, your site or app can begin whatever it needs to do that relies upon the video having been started up.