Menu
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:
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
749
unfortunately, iOS blocks autoplay. The play function needs to be triggered from a click or touch event.
Safari supports the <video> and <audio> media elements on iOS 3.0 and later and in Safari 3.1 and later on the desktop (Mac OS X and Windows). Support for these media elements allows Safari and other HTML5-compliant browsers to play the indicated source media without using a plug-in.
Scroll down past the music you've selected, and you'll see the Autoplay selections that will play when the songs you chose are finished. To turn off Autoplay, just tap the infinity symbol .
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/
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
