“webkit-playsinline” video tag attribute

问题:

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?

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

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

回答3:

Looks like this might finally get implemented properly in iOS 10

回答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','');