HTML5 video autoplay in chrome

[istvanvasil]

Hi!
I am trying to improve a project I have recently finished. Facing some issues when it comes to html5 video autoplay in Chrome. I think it's connected to how Choo works but might be mistaken. I appreciate any help. See behaviour below.

Expected behavior

Starts autoplay of video when visiting address in chrome.

Actual behavior

Shows first frame. Plays only if navigating away within the app and navigating back. Not on direct landing via browsers address bar.

Steps to reproduce behavior

Visit https://josefinelaul.com/404 in Chrome
Video doesn't start
Navigate away using the arrow in the corner.
Then navigate back using the browsers navigation buttons.
Now it plays.

I use the code as follows

<video id="MyVideo" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" src="/content/3-404/leaves.mp4" class="w100"></video>

[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?

[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.

[istvanvasil]

Thank you all for the information and help.

[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 Media: add method to discover whether playback is allowed before calling play() whatwg/html#3617 (comment)