"webkit-playsinline" video tag attribute

Question

The <video> tag attribute webkit-playsinline supposedly prevents the default go to fullscreen behavior of HTML5 videos.

I added this attribute to my video tag and checked mobile safari and chrome on iOS6 iPhone and it doesn't work. The video still goes fullscreen. This is similar to others' experiences as described on SO two years ago.

What mobile browsers as of today, June 13th, 2013 does this attribute webkit-playsinline work?

Solution 1

Apple has finally enabled the playsinline attribute on iOS 10, so this will work:

<video src="file.mp4" playsinline>

I wrote a polyfill called iphone-inline-video that adds the same behavior to iOS 8 and 9.

Solution 2

The webkit-playsinline attribute works for HTML5 video on iOS4+ but only when you save the webpage to your home screen as a webapp. If you are using mobile Safari it will always open fullscreen.

Theres a small blurb about its support here: http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html

I've also seen on recent versions of Android that inline video playback does work within its native browser.

Solution 3

Looks like this might finally get implemented properly in iOS 10

Solution 4

This worked for me. I tried to use playsinline inside of video tag. But it didn't work so I tried to set attribute from jQuery

$('#you video tag id').attr('playsinline',''); 

View more solutions

Comments

[tim peterson]

-@blacktooth, can you mention specific versions of Android that you found it to work?

[code-8]

How do we save it as a web app on an iPhone ?

[Sir Hackalot]

@ihue: Save the URL to homescreen and start it from there. However, webkit-playsinline doesn't work then either as far as I can say.

[Matthew Ratzloff]

In React, this is playsInline, similar to other attributes.