HTML5 video autoplay in chrome

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>

[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 https://github.com/whatwg/html/issues/3617#issuecomment-400859824

[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