HTML5 video autoplay in chrome

[istvanvasil]

HTML5 video autoplay in chrome

[caiogondim]

Hi there. I have to deal with this almost every day on my work.
It's a quite hairy topic, but a TL;DR is:

• Autoplay is not guaranteed anymore
• Every browser uses a different strategy to enable or not autoplay
• There is no native API to detect autoplay
• We created https://github.com/video-dev/can-autoplay lib to detect autoplay. NYT, Vimeo, and others are using in production
• That same lib API is being considered to be ported as a native API whatwg/html#3617 (comment)

[tornqvist]

Like @goto-bus-stop says autoplaying video is a real hassle. In the case of quantified planet we're actually attaching listeners for the canplay event and trigger play programmatically and switching between a short video and a longer one once loaded. You can check out the source code for the video player is here: https://github.com/codeandconspire/quantifiedplanet.org/blob/master/components/story/video.js

[AntonTrollback]

Minor note that might save you debugging time: videos never autoplay on iOS with battery saving mode turned on.

[bcomnes]

Sounds like the chrome changes may get reverted: https://games.slashdot.org/story/18/10/16/169242/chrome-70-wont-ship-with-a-patch-for-autoplay-blocking-web-audio-api-which-broke-web-apps-and-games-earlier-this-year

Cool to close this? Its not really a choo specific issue.

[bcomnes]

IME video reuiqres user input at this point on chrome.

[goto-bus-stop]

Chrome really dislikes autoplaying video without interaction. That's probably why it starts working after navigating away and back; you've already interacted with the page, so Chrome allows it to autoplay. (This way you won't get autoplaying videos in popups or tabs you don't actually use, so it kinda makes sense)

My understanding of Chrome's policy though is that muted videos should autoplay fine, so there's probably still something else going on here too!

For reference: https://www.chromium.org/audio-video/autoplay

[istvanvasil]

Exactly @goto-bus-stop

I've searched a lot on this and seems like people in Angular had some similar issue as well. I've seen the same video tag execute as intended in Vue. So it seems that it is affected by the framework.

I use browserify together with yo-yoify, es2040 and tinyify to bundle up my project.

[istvanvasil]

@tornqvist did you encounter anything like this when working on quantifiedplanet.org header video?

[istvanvasil]

Thank you all for the information and help.