is there a way to detect if calling play() on a video element is allowed without a user gesture? On Android Chrome this warning is given:

Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.

So on Chrome Android a user gesture is required to start the playback of a video, while it isn't on desktop Chrome. Is there a way to detect which behavior I will get?

I want to have slightly different behavior in my app depending on if calling play programatically is allowed or not.

I have tried to use Modernizr.videoautoplay, but that checks if the autoplay property on the element, which is not the same thing. This gives false negatives for IE11 and Edge.

Edit: added an example. The video will start playing automatically in Chrome desktop and IE11 or Edge (with 3s delay) on windows 8 or 10. For Chrome@Android a user interaction is needed (clicking the button) and the error message can be seen in the console.

is there a way to detect if calling play() on a video element is allowed without a user gesture? On Android Chrome this warning is given:

Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.

So on Chrome Android a user gesture is required to start the playback of a video, while it isn't on desktop Chrome. Is there a way to detect which behavior I will get?

I want to have slightly different behavior in my app depending on if calling play programatically is allowed or not.

I have tried to use Modernizr.videoautoplay, but that checks if the autoplay property on the element, which is not the same thing. This gives false negatives for IE11 and Edge.

Edit: added an example. The video will start playing automatically in Chrome desktop and IE11 or Edge (with 3s delay) on windows 8 or 10. For Chrome@Android a user interaction is needed (clicking the button) and the error message can be seen in the console.

• javascript
• html5-video
• modernizr
• feature-detection

Share Improve this question Follow edited Sep 21, 2015 at 15:15 oskbor asked Sep 18, 2015 at 13:39 oskboroskbor 1,5921818 silver badges3535 bronze badges 5

• can you post a code example that has that error? – Patrick Commented Sep 20, 2015 at 6:47
• Hi @Patrick I have updated the question with a link to an example. Its a bit plex (adding frames to the video bit by bit) but the issue can be seen – oskbor Commented Sep 21, 2015 at 15:19
• Hi @oskbor, did you get a fix for this? – Novice Commented Dec 15, 2015 at 17:26
• Nope, did not find a way to detect that – oskbor Commented Dec 15, 2015 at 17:27
• I ended up just filtering var isMobile = false; if ((/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) || (/Mobi/i.test(navigator.userAgent.toLowerCase()))) isMobile = true; – MrPHP Commented Apr 17, 2016 at 7:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The play method returns a promise which can be used to catch the error.

Not all browsers follow the specification so you will have to check if what is returned is a promise first.

var autoPlayAllowed = true;
var promise = document.createElement("video").play();
if(promise instanceof Promise) {
    promise.catch(function(error) {
        // Check if it is the right error
        if(error.name == "NotAllowedError") {
            autoPlayAllowed = false;
        } else {
            throw error;
        }
    }).then(function() {
        if(autoPlayAllowed) {
            // Allowed
        } else {
            // Not allowed
        }
    });
} else {
    // Unknown if allowed
}