Video not playing on iOS10 Chrome

I just can't seem to locate what's wrong with this video snippet.

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/webm" src="sample.webm"></source>
    <source type="video/mp4" src="sample.mp4"></source>
</video>

The video plays without any problems in Safari (haven't tested against earlier versions of iOS, but my only concern there is the autoplay issue?), but on Chrome the only thing I see is the cover image and a play button that doesn't trigger anything. Am I missing something? Do I really need to use JS to get it to work?

Update: It seems there's an issue with playing Webm files with iOS Chrome - I've tried several files from different locations and they seem to be needed to be downloaded first before being able to play.

Solution

Google Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else. Try to use a code published here.

Build an HTML5 video as usual:

<video playsinline autoplay muted loop poster="aurora.jpg" id="bgvid">
    <source src="aurora.webm" type="video/webm"> </source>
    <source src="aurora.mp4" type="video/mp4"> </source>
</video>

If previous advise does not help, try to use scripted playback examples video.js and simpl on Github.

Also, read this post dedicated to muted autoplay in mobile browsers. And it must be useful to read Stack Overflow post as well – Efficiently detect if a device will play silent videos.