79

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

Andre
  • 4,417
  • 8
  • 32
  • 37
  • Technically you can't, but there are a couple libraries available that **make it possible,** like [iphone-inline-video](https://github.com/bfred-it/iphone-inline-video) (disclosure: I wrote it) – fregante Apr 01 '16 at 05:14

8 Answers8

105

I 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 :)

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".

starball
  • 20,030
  • 7
  • 43
  • 238
Andre
  • 4,417
  • 8
  • 32
  • 37
  • 26
    I just wanted to clarify something in your answer... if you're developing for a web-only solution (in which case the UIWebView doesn't come into play) then this won't work, right? – natlee75 Nov 29 '11 at 15:48
  • wrong: works on the iPad (iOS4+) with the webkit-playsinline attribute. The Obj-C code / webview is only needed to get it running on iPhone/iPod – Jörn Berkefeld Mar 09 '12 at 08:19
  • 8
    @Andre: Can you please help me out by explaining,how can i use obj-c with my pure HTML5 webpage? i want to play video inline on iPhone in video player of my html5 site. – Hiral Vadodaria Jun 01 '12 at 07:21
  • 9
    If you are using Phonegap / Cordova, you can enable inline media playing with `` in your config.xml file AND adding webkit-playsinline to the ` – micho Mar 17 '14 at 12:02
  • 2
    Thanks! I've been looking for this info for ages. – Paul Mar 28 '14 at 06:34
  • @Andre you have to use phonegap in order to do this...you can't use obj-c other wise. Phonegap allows you to package, for example, a mobile optimized website with in an app architecture which allows you to use the phone hardware features and many other things. It gives you more creative freedom. – greaterKing Jul 10 '14 at 14:21
  • @Andre Actually I just tested on an iPhone and it does not work. Only iPad. – Paul Feb 17 '15 at 23:27
  • Hey @Paul, this solution is 5 years old, so it's likely things have changed :/ – Andre Feb 18 '15 at 09:10
  • 2
    @Andre It does still work in a UIWebView. I've tried it recently in an app so I know it does. It was my fault, I misunderstood the OP's question and thought he was trying to do this in mobile Safari (not a UIWebView), which is the solution I'm currently looking for. Back in 2011, I was able to play video inline in Safari by using custom video controls, but that doesn't work anymore. – Paul Feb 18 '15 at 21:16
  • Ah, no worries @Paul. Good to know, as I'm actually the OP :P Thanks for commenting. – Andre Feb 19 '15 at 21:52
  • For iOS 10 and above ` – TheTiger Aug 18 '17 at 12:58
  • There is an issue that the playing video inline is much slower than using full screen. Does anybody experiencing this issue? – saburo Jan 30 '19 at 21:21
11

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.

Gajus
  • 69,002
  • 70
  • 275
  • 438
5

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.

fregante
  • 29,050
  • 14
  • 119
  • 159
1

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..

LarsJK
  • 2,196
  • 18
  • 23
  • I have a UIWebView wrapper! That sounds like a lifesaver, but it only semi-works. I'm getting the JS events (cue points), but it's still running fullscreen with its own video controls for some reason :/ – Andre Sep 13 '10 at 13:24
  • 4
    I am trying to achieve the same, but for mobile safari (hence no UIWebView). You have any hint ? – Cystack Sep 08 '11 at 18:58
  • Sorry, not really. I was looking at this over a year ago and haven't looked at it since. Good luck though! – Andre Dec 05 '11 at 16:08
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.

saswanb
  • 1,975
  • 1
  • 17
  • 25
0

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.

newshorts
  • 1,057
  • 12
  • 12
0

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

jeprubio
  • 17,312
  • 5
  • 45
  • 56
Paradise
  • 558
  • 6
  • 17
-1

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

Paradise
  • 558
  • 6
  • 17