在 Ionic/Phonegap 中内联播放视频（webkit-playsinline 不工作）

Question

我正在使用 HTML5 视频标签在我的 ionic 应用程序中播放视频。这是我的代码：

<video autoplay loop class="video" webkit-playsinline>
    <source src="videos/polina.mp4" type='video/mp4; codecs="h.264"' >
    <source src="videos/polina.webm" type="video/webm">
</video>

视频可以正常自动播放，但是视频会在原生播放器中打开，并且不会内联播放。经过一番研究，我了解到webkit-playsinline 应该可以解决这个问题，至少在 iOS 上是这样，但对于我在 iOS8 和 9 上的测试来说，情况似乎并非如此。

我尝试了 videogular，但仍然出现了该死的原生播放器。

我什至付了一点钱才能在此处获取此代码：https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video，它准确地说明了我正在尝试创建的内容（登录屏幕上的背景视频），但视频仍会在本机播放器中打开。

有没有人设法在他们的 ionic/phonegap 应用上播放视频？如果有怎么办？

Answer 1

原因是 UIWebView 未配置为允许内联视频播放。在 iPad 上默认允许，但在 iPhone 上则不允许。

您可以通过将其添加到您的 config.xml 来轻松地允许这样做：

<preference name="AllowInlineMediaPlayback" value="true" />

UIWebView 应该尊重 webkit-playsinline 属性。

此外，该代码也适用于大多数 Android 设备（特别是如果您添加了 Crosswalk 插件）。但是你应该先放 webm，然后是 mp4 文件，以避免某些版本的 Chrome 出现问题。

您还应该将 poster="firstFrame.jpg" 添加到视频标签中，以便在视频准备好播放时获得图像。 jpg 应该是视频的第一帧（使用您喜欢的任何视频编辑器来提取它）。

有关更完整的示例（并且免费...），请参阅此站点。我已经在带有 Cordova 的 Android / iOS 上使用了这个，改动很小。所需的更改是将文件加载到项目中，使用适用于 Android 的 CrossWalk，删除 css 中的媒体选择器（它在设计上会在小屏幕上停止视频，但在 Cordova 中可以正常工作），添加 playinline 属性，最后添加config.xml 中的首选项。

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video