Webkit-playsinline on iphone
html, ios, iphone, javascript, video
Solution
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.
Problem
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. I try to apply the webkit-playsinline attribute on my video tag but it doesn't work. Is there a way - in full HTML5/JS - to prevent the native behavior of ios video player ? I note that this problem is only on iphone (ios 7), not ipad. Thanks ! Here my video tag : ``` <video vineresizer preload="auto" poster="{{vine.src_poster}}" loop webkit-playsinline="webkit-playsinline" controls="controls"> <source ng-src="{{ trustSrc(vine.src_video) }}" type="video/mp4"> </video> ``` And my js : ``` var video = element[0]; video.addEventListener('contextmenu', function (e) { e.preventDefault(); e.stopPropagation(); }, false); if (video.hasAttribute('controls')) { video.removeAttribute('controls'); } ```