我正在使用HTML5 video标签在我的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上，但这似乎不是我在iOS 8和9上测试的情况。
我试过videogular，我仍然得到该死的本地播放器出现。
我甚至花了一点钱在这里得到了这个代码：https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video，它说明了我试图创建的内容（在我的登录屏幕上的背景视频），但视频仍然打开到本地播放器。
有没有人设法让视频在他们的ionic/phonegap应用程序上在线播放？如果有，怎么做？
2条答案
按热度按时间gajydyqb1#
原因是UIWebView没有配置为允许内联视频播放。在iPad上默认允许内联视频播放，但在iPhone上不允许。
您可以通过将以下内容添加到config.xml来轻松实现此功能：
字符串
然后，UIWebView应该遵守webkit-playsinline属性。
此外，代码也可以在大多数Android设备上工作（特别是如果你添加了Crosswalk插件）。但是，你应该先放webm，然后放mp4文件，以避免某些版本的Chrome出现问题）。
您还应该在video标签中添加poster=“firstFrame.jpg”，以便在视频准备播放时获得图像。jpg应该是视频的第一帧（使用您喜欢的任何视频编辑器提取它）。
请访问此网站以获取更完整的示例（而且是免费的...）。我在Android / iOS上用Cordova用过这个，改动很小。需要的改动是将文件加载到项目中，使用Android的Crosswalk，删除css中的媒体选择器（它在设计上会停止小屏幕上的视频，但在Cordova中工作正常），添加playsinline属性，最后，将首选项添加到. xml中。
http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video
tp5buhyn2#
2023年更新
下面是我如何使它在iOS电容器中工作，在视频标签中添加playsinline webkit-playsinline，src以及type。
字符串
还添加到@布拉德L发布的电容器配置中：
型
希望对大家有所帮助。