HTML5 Video autoplay on iPhone

I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

This works perfectly fine on most browsers (IE struggles with this object-fit thing but I don't mind) but on iPhone the video won't autoplay but on iPad it does. I already read the New Policies for iOS and I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing:

Removing overlaying divs won't fix it
Removing z-index won't fix it
Wifi or Cellular doesn't make a difference
Video filesize doesn't make a difference, too

Am I doing it wrong or does iPhone simply won't autoplay videos and always requires interaction? I only care for iOS 10, I know that the requirements were different on iOS 9

Does playsinline attribute help?

Here's what I have:

        <video autoplay loop muted playsinline class="video-background ">
            <source src="videos/intro-video3.mp4" type="video/mp4">
        </video>

See the comment on playsinline here: https://webkit.org/blog/6784/new-video-policies-for-ios/

D Godhani

iOs 10+ allow video autoplay inline. but you have to turn off "Low power mode" on your iPhone.

来源：https://stackoverflow.com/questions/43570460/html5-video-autoplay-on-iphone

标签

ios