Can I avoid the native fullscreen video player with HTML5 on iPhone or android?

Question

I've built a web app that uses the HTML5 tag and JavaScript code that renders other content synchronized with the running video. It works great in desktop browsers: Firefox, Chrome, and Safari. On an iPhone or a DroidX, the native video player pops up and takes over the screen, thus obscuring the other dynamic content that I want to display simultaneously with the video.

Is there any way around this? If necessary, I'll figure out how to write native apps for both those platforms, but it would save me a ton of effort if I could just stick with HTML5/JavaScript.

Mutter

Actually, browser implementations of a/v players in both ios and android are buggy like hell. Try several players on the page or try to add stylish controls to them and you will see - its unusable. So, probably external fullscreen app for playing video - isn't so bad ;) – Brooks

I am happy every time apple devices renders my content in the intended way. I use to celebrate that. – Meridith

Technically no, but there are a couple libraries available that make it possible, like iphone-inline-video (disclosure: I wrote it) – Tauromachy

Answer 1

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

Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.

Long answer: You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.

Tauromachy

It does not work in the Captive Network Assistant (Captive Portal) – Boule

Even in 2023 this rescued me, thank you! My issue was with recording inline so I was focused on searching for inline options to the the MediaRecorder object, but this was all I needed. – Warfarin

Answer 2

There's a property that enables/disables in line media playback in the iOS web browser (if you were writing a native app, it would be the allowsInlineMediaPlayback property of a UIWebView). By default on iPhone this is set to NO, but on iPad it's set to YES.

Fortunately for you, you can also adjust this behaviour in HTML as follows:

<video id="myVideo" width="280" height="140" webkit-playsinline>

...that should hopefully sort it out for you. I don't know if it will work on your Android devices. It's a webkit property, so it might. Worth a go, anyway.

Forebear

Thanks for the suggestion. Unfortunately, it didn't change the behavior I'm seeing - full-screen native video players pop up on both iPhone and DroidX. – Mutter

I am having this issue too. I have added the webkit-playsinline and even the xml validated version of webkit-playsinline="webkit-playsinline", but doesn't change the behavior – Marmoreal

This may not work in Safari for iPhone since the web view does not allow inline video playback. If however, the webpage is hosted within your own UIWebView within your own app, you can set these properties and inline video playback will be possible: webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = NO; – Fancier

I've read that this works only within UIWebView in native apps AND in web pages ONLY when you save them to the home screen as webapps. – Moonraker

This works in Cordova/PhoneGap, too. Just add the following to your config.xml in Cordova project: <preference name="AllowInlineMediaPlayback" value="true" /> – Yardmaster

<preference name="AllowInlineMediaPlayback" value="true" /> Great!. it works fine on my iPhone. Thanks a lot. – Stranger

Thanks @Mr.TA. You save my time. – Lalita

Answer 3

Old answer (applicable till 2016)

Here's an Apple developer link that explicitly says that -

on iPhone and iPod touch, which are small screen devices, "Video is NOT presented within the Web Page"

Safari Device-Specific Considerations

Your options:

• The webkit-playsinline attribute works for HTML5 videos on iOS but only when you save the webpage to your home screen as a webapp - Not if opened a page in Safari
• For a native app with a WebView (or a hybrid app with HTML, CSS, JS) the UIWebView allows to play the video inline, but only if you set the allowsInlineMediaPlayback property for the UIWebView class to true

Miscellaneous

See my comments to the accepted answer. ICYMI, for Cordova, add the following to your config.xml: <preference name="AllowInlineMediaPlayback" value="true" /> – Yardmaster

On YouTube.com it plays without without going fullscreen – Assay

The answer is old, 2014, and things may have changed. Also, youtube.com is not a native app with a WebView as mentioned in the answer. Thanks for noticing though. – Miscellaneous

Answer 4

In iOS 10 beta 4.The right code in HTML5 is

<video src="file.mp4" webkit-playsinline="true" playsinline="true">

webkit-playsinline is for iOS < 10, and playsinline is for iOS >= 10

See details via https://webkit.org/blog/6784/new-video-policies-for-ios/

Superconductivity

Answer 5

According to this page https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html it is only available if (Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES.) I understand in Mobile Safari this is YES on iPad and NO on iPhone and iPod Touch.

Sachasachem

It seems like this would only work if you were setting up an HTML5 player page to "live within" a native iOS app. It certainly doesn't work on a plain ol' webpage. – Lamella

Answer 6

I don't know about android, but Safari on the iPhone or iPod touch will play all videos full screen because of the small screen size. On the iPad it will play the video on the page but allow the user to make it full screen.

Henig

Answer 7

For React.js ,don't forget to use camelcase :

<video src="file.mp4" playsInline>

Sharper