"webkit-playsinline"视频标记属性

tim*_*son 28 html javascript html5 fullscreen html5-video

据称,<video>tag属性webkit-playsinline可以防止默认转到HTML5视频的全屏行为.

我将此属性添加到我的视频标签中,并在iOS6 iPhone上检查了移动版Safari和Chrome,但它不起作用.视频仍然全屏显示.这类似于两年前SO所描述的其他经历.

截至2013年6月13日的移动浏览器有哪些功能webkit-playsinline

fre*_*nte 38

Apple终于playsinline在iOS 10上启用了该属性,因此这将起作用:

<video src="file.mp4" playsinline>
Run Code Online (Sandbox Code Playgroud)

我写了一个名为iphone-inline-video的polyfill ,它为iOS 8和9添加了相同的行为.

  • 在React中,这是`playsInline`,类似于其他属性。 (2认同)

小智 16

webkit-playsinline属性适用于iOS4 +上的HTML5视频,但仅限于将网页作为webapp保存到主屏幕时.如果您使用的是移动Safari,它将始终打开全屏.

关于它的支持,这里有一个小小的模糊:http: //developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html

我在最近的Android版本中也看到内联视频播放在其原生浏览器中可以正常工作.