HTML5 Video autoplay on iPhone

ios html video webkit autoplay
SeBa picture SeBa · Apr 23, 2017 · Viewed 104k times · Source

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:

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

Answer

Pete Florence picture Pete Florence · Jul 30, 2017

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/

Related questions

Implementation of HTTP Live Streaming in iOS

I want to write a little iOS video client and have to use HTTP Live Streaming. The videos come from a Wowza Media Server which supports HTTP Live Streaming, so the server-side implementation is not my problem. I have already …

Read More
autoplay=1 not working for <iframe> in playing video in mobile devices

I'm working with video. When i click on Video Thumbnail a pop appears and Video plays in that,I need to start play the video (without clicking the play button) when popup opened.I tried with code below. It was …

Read More
How to MPEG-DASH video streaming in iOS?

I am trying to write a java script based implementation of MPEG-DASH for video streaming . I have referenced following documents dash.js - https://github.com/Dash-Industry-Forum/dash.js/wiki Google Shaka Player - https://github.com/google/shaka-player These …

Read More