ios – 在Ionic / Phonegap中播放视频(webkit-playinline不工作)

我使用 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-playinline应该解决这个问题,至少在iOS上,但是对于我在iOS8和9上的测试似乎并不是这样.

我试过视频格式,我仍然得到爆炸的本地播放器出现.

我甚至付出了一点代码：https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video说明了我正在尝试创建什么(在我的登录屏幕上是一个背景视频),但仍然是视频打开了本地播放器.

有没有人设法获得一个视频在线上离线/手机应用程序播放？如果是这样的话

解决方法

为什么UIWebView没有被配置为允许内联视频播放的原因.在iPad上,它是默认允许的,但在iPhone上不是.

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

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

UIWebView应该遵循webkit -playinline属性.

此外,代码也适用于大多数Android设备(特别是如果您添加了Crosswalk插件).但是,您应该首先将网页,然后是mp4文件,以避免某些版本的Chrome出现问题).

您还应该为视频标签添加一张海报=“firstFrame.jpg”,以便在视频准备播放时获得图像. jpg应该是视频的第一帧(使用您喜欢的任何视频编辑器来解压缩).

看这个网站一个更完整的例子(和免费的…).我已经在Android / iOS上使用了Cordova,而且几乎没有变化.所需的更改是将文件加载到项目中,使用CrossWalk for Android,删除css中的媒体选择器(它通过设计在小屏幕上停止视频,但在Cordova中可以正常工作),添加playinline属性,最后添加config.xml中的首选项.

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