Question

我需要同时播放6个视频作为不同div中的背景，但是在IOS和ANDROID平台中。我正在开发一种离子应用程序。

我找到了一个与网络完美配合的solution，但是当我构建它时，它就像我想象的那样工作：我用作背景的每个视频都只是全屏播放。

这里有一些代码：

.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

所以对于这个问题，使用了两件事。

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

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

在视频标签中添加webkit-playsinline指令后，如下所示：

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

它就像一个魅力。

Answer 2

请注意，上述答案是正确的，但最近iOS对视频代码进行了更新后，视频还必须将静音属性设置为true才能允许自动播放用户手势。

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

我昨晚花了很多时间试图弄明白这一点，我希望这能帮助其他人。

使用视频作为ios的ionic / cordova中的背景

2 个答案: