Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add proposed explainer #8

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions explainer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
# Autoplay Detection API

## Problem

If a website plays a video it cannot detect whether it will be allowed to autoplay or whether that autoplay will be blocked until it calls play on the media element.

## Goal

A site should be able to determine whether a video will autoplay or not. Knowing this in advance is important for a site as it may want to adjust the user experience or select alternate content to use instead.

## Proposed API Design

The document has an autoplay policy which can change. There will be an API on the document to get the autoplay policy and another on the media element which will return a boolean as to whether the media will be able to autoplay.

There are three types of autoplay policy:

* `allowed` - autoplay is allowed
* `allowed-muted` - muted autoplay is allowed
* `disallowed` - document level autoplay is not allowed. The site should check on the element whether element level autoplay is allowed

The API is defined as the following:

```javascript
enum AutoplayPolicy {
"allowed",
"allowed-muted",
"disallowed"
};

enum AutoplayPolicyMediaType {
"mediaelement",
"audiocontext"
};

partial interface Navigator {
AutoplayPolicy getAutoplayPolicy(AutoplayPolicyMediaType type);
AutoplayPolicy getAutoplayPolicy(HTMLMediaElement element);
AutoplayPolicy getAutoplayPolicy(AudioContext context);
};
```

## Sample Code

### A site would like to change the source based on whether it will autoplay

In this situation a site would like to change the source based on whether it will autoplay. In this example the site will play `video.webm` if it can autoplay unmuted. If it cannot then it will use `video-alt.webm` instead.

```javascript
const policy = navigator.getAutoplayPolicy("mediaelement");

if (policy === "allowed") {
loadUnmutedVideo();
} else {
loadMutedVideo();
}
```

### A site would like to change its experience based on whether it will autoplay

In this situation a site would like to change its experience based on whether it will autoplay. In this example if it cannot autoplay unmuted then it will mute the video element.

```javascript
const video = document.getElementById("video");
const policy = navigator.getAutoplayPolicy("mediaelement");

video.src = "video.webm";

if (policy === "allow-muted") {
video.muted = true;
}

video.play();
```

## Alternatives Considered

### Event Listener

We considered having an event listener to allow sites to listen to changes in autoplay policy. However, this may cause issues where there are multiple event listeners on a page that all start playing when the autoplay policy changes.

### Autoplay Permission

We considered having autoplay as a permission. However, there are a few differences between the autoplay policy and permissions:

* Autoplay policy is something that is applied to the site from the browser; rather than something that should be requested
* Autoplay policy has multiple states (e.g. allowed, allowed-muted); rather than a yes or no
* Autoplay policy is not implemented by user agents as a permission
* Permissions are async