Staffan Estberg Staffan Estberg - 14 days ago 9
iOS Question

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.

Answer

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 at: http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

enter image description here

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

https://github.com/videojs/video.js

https://github.com/samdutton/simpl/blob/gh-pages/video/scripted/index.html

Also, read the issue dedicated to muted autoplay in mobile browsers:

https://github.com/whatwg/html/issues/976

It must be useful to read S.O. post as well:

Efficiently detect if a device will play silent videos that have the autoplay attribute

¡Hope this helps!

Comments