2

I am trying to make videos play inline on iOS 10 but after an upgrade from iOS beta 4 to beta 6 this stopped working. On my config.xml I have added these 2 lines

<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="true" />

Then on my html template I have

<video src="img/demo.mp4" preload="auto" controls autoplay muted webkit-playsinline ></video>

and also I have tried this

<div class="video-container-inner">
    <img src="{{video.poster}}" class="img-responsive img-cover">
      <video id="article{{$index + 1}}" preload x-webkit-airplay="allow" webkit-playsinline="webkit-playsinline" class="videoPlayerSingle article{{$index + 1}}">
          <source src="{{video.url}}" type="video/mp4"/>
     </video>
</div>

Do you guys have had this problem? How did you solve it?

Michel Arteta
  • 1,384
  • 2
  • 13
  • 25

1 Answers1

2

The reason for this is because we also need to add playsinline without webkit prefix so the code will be: 

<div class="video-container-inner">
    <img src="{{video.poster}}" class="img-responsive img-cover">
      <video id="article{{$index + 1}}" preload x-webkit-airplay="allow" playsinline webkit-playsinline class="videoPlayerSingle article{{$index + 1}}">
          <source src="{{video.url}}" type="video/mp4"/>
        </video>
  </div>

This works for me on ionic 1.3 iOS 10 beta 6.

Michel Arteta
  • 1,384
  • 2
  • 13
  • 25