html - 在 ionic/cordova for ios 中使用视频作为背景

Question

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

我找到了 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

所以对于这个问题使用了 2 个东西。

第一个，在 config.xml 上添加了下一行

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

然后像这样在视频标签内添加 webkit-playsinline 指令:

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

它就像一个魅力。