Ionic 1.3 - iOS 10 beta 6 not playing mp4 videos inline

Question

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?

Answer 1

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.