在 ionic/cordova for ios 中使用视频作为背景答案

【问题标题】：Use video as a background in ionic/cordova for ios在 ionic/cordova for ios 中使用视频作为背景
【发布时间】：2016-05-02 12:42:43
【问题描述】：

我需要同时在不同的 div 中播放 6 个视频作为背景，但在 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>

希望有人可以帮助我。

【问题讨论】：

标签： html ios css cordova ionic-framework

【解决方案1】：

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

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

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

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

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

它就像一个魅力。

【讨论】：

放置视频的位置。
对不起，你什么意思？
我的意思是路径，如果我将相对路径放在 src 中（本地文件存在于项目中）。那怎么放呢
只放视频的路径，有什么问题？你找不到视频吗？你能给我一个例子吗？
由于某种原因它没有循环播放……其他一切都很好。

【解决方案2】：

请注意，上面的答案是正确的，除了最近 iOS 对视频标签的更新，视频还必须将 muted 属性设置为 true 才能允许自动播放而无需用户手势。

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

我昨晚整晚都在试图解决这个问题，我希望这对其他人有帮助。

【讨论】：