使用视频作为离子/ cordova的背景为ios [英] Use video as a background in ionic/cordova for ios

问题描述

我需要玩像6视频作为背景在不同的divs在同一时间，但在IOS和ANDROID平台。我正在开发一个离子应用程序。

I'm needing to play like 6 videos as background in differents divs at the same time, but in IOS and ANDROID platforms. I'm developing an ionic app.

我发现了一个解决方案可以完美地与网络，但当我建立它，它的工作原理：我用作背景的每个视频只是播放作为全屏。

I've found a solution that works perfectly with web, but when I builded it up, it worked as I supposed: every video that I used as background just play as full screen.

这里有一些代码：

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

希望有人能帮助我。 p>

Hope someone can help me.

推荐答案

因此，对于这个问题，使用了2件事。

So for this issue as used 2 things.

on config.xml添加了下一行

First one, on config.xml added the next line

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

然后在视频标签内添加webkit-playsinline指令，例如：

And after add the webkit-playsinline directive inside the video tag like this:

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

它的作用就像一个魅力。

And it works like a charm.

这篇关于使用视频作为离子/ cordova的背景为ios的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！