HTML5 inline video on iPhone vs iPad/Browser

Question

I've created an HTML5 video player (very simple) that works perfectly on the iPad and the browser.

However, when I open it on the iPhone, I only get a play button which, when pressed, opens the native video player on a new window, on top of all my stuff.

That means I lose access to my custom controls and time tracking (written in Javascript), since the video is now running isolated.

Is there any way to override Apple's control of HTML5 video on the iphone and get it working like on the ipad?

Cheers

Answer 1

In iOS 10 adding 'playsinline' attribute to the HTML5 video tag did not prevent fullscreen playback on an iPhone UIWebview until I also added the 'controls' attribute. This is how I got it working:

<video width="100%" height="240" controls playsinline>
      <source src="movie.mp4" type="video/mp4" >
</video>

With, of course, _webView.allowsInlineMediaPlayback=YES; in the ViewController also.

Answer 2

You can easily allow this by adding this to your config.xml: The UIWebView should then respect the webkit-playsinline attribute.

Answer 3

Until iOS Safari implements inline video support, you need to write video decoder in a web supported language. There are existing implementations of video decoders, such as Broadway for H.264 (video), jsmpeg for mpeg1, and ogv.js (video and sound support).

Keep in mind that the process of decoding a video is computationally heavy. Expect a relatively slow FPS (±20).

For your reference, these guys have prepared a demo of a video that you can play on your iOS device.

Answer 4

In iOS 10+

Apple enabled the attribute playsinline in all browsers on iOS 10, so this works 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.

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

Answer 5

Just add following to your config.xml: <preference name="AllowInlineMediaPlayback" value="true" /> Otherwise UIWebView will neglect the webkit-playsinline attribute.

Answer 6

There are some work arounds, I'm working on a library to allow this functionality automatically. However, until Apple sets safari to

webview.allowsInlineMediaPlayback = YES;

then we will have to use hacks for the same behavior.

You can check out the project here: https://github.com/newshorts/InlineVideo to see if it meets your needs.