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

Posted 2023-05-07

【中文标题】在 Ionic/Phonegap 中内联播放视频（webkit-playsinline 不工作）

【英文标题】：Playing video inline in Ionic/Phonegap (webkit-playsinline not working)

【发布时间】：2016-03-03 03:10:27

【问题描述】：

我正在使用 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 应用上播放视频？如果有怎么办？

【参考方案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

【讨论】：

谢谢！ :)。正是需要的。

随时乐意提供帮助！

我试过这个，但它似乎不适用于带有 youtube iframe api 的 ionic 框架

我的配置每次都会被覆盖；