Question

我正在使用HTML5视频代码在我的离子应用中播放视频。这是我的代码：

<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上进行测试似乎并不是这样。

我尝试了视频，而且我仍然会让爆破的本地玩家出现。

我甚至付了一些代价来获取此代码：https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video它说明了我正在尝试创建的内容（我的登录屏幕上的背景视频），但视频仍会打开到本机播放器中。< / p>

有没有人设法在他们的离子/ phonegap应用上播放内联视频？如果是这样的话？

Answer 1

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

您可以通过将其添加到config.xml来轻松实现此目的：

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

然后，UIWebView应该遵守webkit-playsinline属性。

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

你还应该添加一张海报=＆＃34; firstFrame.jpg＆＃34;到视频标记，以便在视频准备播放时获得图像。 jpg应该是视频的第一帧（使用你喜欢的任何视频编辑器来提取它）。

请参阅此网站以获取更完整的示例（并免费...）。我已经在Android / iOS上使用了Cordova，只需要很少的更改。所需的更改是将文件加载到项目中，使用CrossWalk for Android，删除css中的媒体选择器（它在设计上在小屏幕上停止视频，但在Cordova中可以正常工作），添加playsinline属性，最后添加config.xml中的首选项。

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

在Ionic / Phonegap中播放视频内联（webkit-playsinline无法正常工作）

1 个答案: