Webkit-playsinline On Iphone

I'm currently working on a project with a lot of videos and this project needs to work on iphone. But actually, the ios's video placeholder doesn't allows me to scroll in my page.

Solution 1:

I've been looking into this issue extensively as well.

Unfortunately, 'webkit-playsinline' only works in a UIWebView in a native app, and then only when a flag is set in the native code. See this question.

From Apple's docs it seems there is no way to prevent this default behavior, but you can still capture the 'ended' and 'paused' events from the native player as if it were simply an HTML5 player inline in the page. I.e. event listeners on 'ended' etc. should still work.

You can also get some state information from the native player: https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html

Overall, you can only interact with the native player in a very limited way, and no known overrides exist.

Solution 2:

In iOS 10+

Apple will finally enable the attribute playsinline in all browsers on iOS 10, so this will work seamlessly:

<video src="file.mp4" playsinline>

In iOS 8 and iOS 9

You can reproduce the behavior by simulating the playback by skimming the video instead of actually .play()'ing it.

iphone-inline-video can take care of the playback and audio sync (if any), and it keeps the <video> working as it should.