使用video作为离子/cordova为iOS的背景

我需要同时播放6个video作为背景，但在IOS和ANDROID平台。 我正在开发一个离子应用程序。

我发现了一个可以和networking完美结合的解决scheme ，但是当我build立起来的时候，它的工作方式就像我所想的那样：我用作背景的每个video都是以全屏模式播放的。

这里有一些代码：

.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> 

希望可以有人帮帮我。

Answer 1

所以这个问题就用了2件事情。

首先在config.xml上添加下一行

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

在video标签内添加webkit-playsinline指令后，如下所示：

 <video controls preload="auto" webkit-playsinline><source src="videos/video_file.mp4"></video> 

它就像一个魅力。

Answer 2

请注意，上面的答案是正确的，除了最近的iOS更新video标签，video必须也将muted属性设置为true，以便允许在没有用户手势的情况下自动播放。

 <video controls preload="auto" autoplay playsinline muted loop><source src="videos/video_file.mp4"></video> 

我花了整个昨晚试图找出这一个，我希望这可以帮助别人。