search

choojs / choo

:steam_locomotive::train: - sturdy 4kb frontend framework
https://choo.io/
MIT License
6.78k stars 595 forks source link

HTML5 video autoplay in chrome #687

Closed istvanvasil closed 6 years ago

istvanvasil commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

tornqvist commented 6 years ago

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 commented 6 years ago

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

bcomnes commented 6 years ago

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 commented 6 years ago

IME video reuiqres user input at this point on chrome.

istvanvasil commented 6 years ago

Thank you all for the information and help.

caiogondim commented 6 years ago

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: