“webkit-playsinline”视频标签属性答案

【问题标题】："webkit-playsinline" video tag attribute“webkit-playsinline”视频标签属性
【发布时间】：2013-06-10 01:33:48
【问题描述】：

<video> 标签属性 webkit-playsinline 据说可以防止 HTML5 视频的默认全屏行为。

我将此属性添加到我的视频标签并检查了 iOS6 iPhone 上的移动 safari 和 chrome，但它不起作用。视频仍然全屏显示。 This is similar to others' experiences as described on SO two years ago.

截至 2013 年 6 月 13 日的今天，哪些移动浏览器可以使用此属性 webkit-playsinline？

【问题讨论】：

【解决方案1】：

Apple 终于在 iOS 10 上启用了playsinline 属性，所以这将起作用：

<video src="file.mp4" playsinline>

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

【讨论】：

【解决方案2】：

webkit-playsinline 属性适用于 iOS4+ 上的 HTML5 视频，但仅当您将网页作为 web 应用程序保存到主屏幕时。如果您使用的是移动 Safari，它将始终全屏打开。

我还在最新版本的 Android 中看到，内嵌视频播放确实可以在其本机浏览器中工作。

【讨论】：

【解决方案3】：

看起来像这样might finally get implemented properly in iOS 10

【讨论】：

【解决方案4】：

这对我有用。我尝试在视频标签内使用playsinline。但它不起作用所以我尝试从jQuery设置属性

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

【讨论】：