Playing video inline (webkit-playinline)

ionic-v1
1

I’m using the HTML5 video tag to get a video playing in my ionic app. Here’s my code:

 <video autoplay loop class="video" webkit-playsinline>
    <source src="videos/polina.mp4" type='video/mp4; codecs="h.264"' >
    <source src="videos/polina.webm" type="video/webm">
  </video>

The video autoplays fine, however the video opens up into the native player and doesn’t play inline. After some research I came to understand that webkit-playsinline should solve this issue, at least on iOS, but this doesn’t seem to be the case for me testing on iOS8&9.

I tried videogular and I’m still getting the blasted native player appearing.

I even paid a little bit to get this code here: https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video that illustrates exactly what I am trying to create (a background video on my login screen) but still the video opens up into the native player.

Has anyone managed to get a video to play inline? If so how?

2

Here’s some more info

AFAIK, if the video tag is within , the playsinline settings are overruled by the props.

1 Like