我需要在 IOS 和 ANDROID 平台上同时在不同的 div 中播放 6 个视频作为背景。我正在开发一个离子应用程序。
我找到了一个solution https://stackoverflow.com/a/31060664/1678851它与网络完美配合，但是当我构建它时，它按照我的设想工作：我用作背景的每个视频都以全屏方式播放。
这是一些代码：
.bg-vid {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: 100%;;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(http://www.w3schools.com/tags/movie.mp4) no-repeat;
background-size: cover;
}
<div>
<video autoplay muted loop class="bg-vid">
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/webm">
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
</div>
希望可以有人帮帮我。
因此，对于这个问题，使用了两件事。
第一个，在 config.xml 添加下一行
<preference name="AllowInlineMediaPlayback" value="true"/>
在视频标签内添加 webkit-playsinline 指令后，如下所示：
<video controls preload="auto" webkit-playsinline><source src="videos/video_file.mp4"></video>
它就像一个魅力。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
