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.

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

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

Solution 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

Solution 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/

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

View more solutions

Comments

[AlpineCarver]

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.

[mike clagg]

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

[natlee75]

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.

[Willster]

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;

[Martin Schaer]

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.

[Mr. TA]

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

[Mr. TA]

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

[sirius2013]

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

[Dominik Vogt]

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

[saddam]

Thanks @Mr.TA. You save my time.

[Anthony]

On YouTube.com it plays without without going fullscreen

[KingJulian]

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.