ios - Disable fullscreen iphone video

Question

Struggling with this problem for a few days in a row now...

Is there any way or 'hack' to disable playing video fullscreen on Safari on a iPhone. Of course I already tried the 'webkit-playsinline' attribute, but this will only work in your own app.

See:

<video class="" poster="" webkit-playsinline>
    <source src="" type="video/ogg" preload="auto">
    <source src="" type="video/mp4" preload="auto">                
</video>

Also I've tried to put the video on canvas, but as it looks video as a source for the canvas drawImage() method is not currently supported on iOS.

Is there any other way or alternative technique I can use? Or did I really waste my time the last few days?

question from:https://stackoverflow.com/questions/19521667/disable-fullscreen-iphone-video

Answer 1

In iOS 10+

Apple finally enabled 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 work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.

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