HTML5 inline video on iPhone vs iPad/Browser

78
votes

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

8
iphoneipadvideohtml
Technically you can't, but there are a couple libraries available that make it possible, like iphone-inline-video (disclosure: I wrote it) – fregante

8 Answers

104
votes

Right,

I was going nowhere with this and filed a bug with Apple.

After a couple of weeks they got back to me saying, very simply, that I should add "webkit-playsinline" to the video tag on the HTML, as well as adding the "allowsInlineMediaPlayback" property on the UIWebView.

So in the end, this is what it looks like:

HTML

<video id="player" width="480" height="320" webkit-playsinline>

Obj-C

webview.allowsInlineMediaPlayback = YES;

And all works just fine :)

Hope this helps someone, as it's virtually undocumented and the only place I could find a reference to "webkit-playsinline" was in the iAds reference, where it says: "iAds JS only".

11
votes

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.

4
votes

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.

1
votes

Do you have an app created or is this for mobile safari? If you have an app and use UIWebView you should set UIWebView's allowsInlineMediaPlayback property..

1
votes

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.

0
votes

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.

0
votes

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

-1
votes

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