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

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,它说明了我正在尝试创建的内容(我的登录屏幕上的背景视频)但仍然是视频打开了原生播放器.

有没有人设法让他们的离子/ 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应该是视频的第一帧(使用你喜欢的任何视频编辑器来提取它).

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

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