<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说明了我正在尝试创建什么(在我的登录屏幕上是一个背景视频),但仍然是视频打开了本地播放器.
有没有人设法获得一个视频在线上离线/手机应用程序播放?如果是这样的话
解决方法
您可以通过将其添加到您的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