HTML 嵌入视频背景不会在 Android 或 IOS 上加载答案

【问题标题】：HTML Embeded Video Background can't load on Android or IOSHTML 嵌入视频背景不会在 Android 或 IOS 上加载
【发布时间】：2015-12-21 02:30:20
【问题描述】：

我的客户的网站背景视频无法在移动设备（Android 和 iOS）上加载，但在台式机/PC 上运行良好。

网站：www.jossefbn.com/test

直接视频链接：

MP4：www.jossefbn.com/test/videos/video-1.mp4
WEBM：www.jossefbn.com/test/videos/video-1.webm
OGG：www.jossefbn.com/test/videos/video-1.ogg

这是我正在使用的一段代码：

#video_background { 
  position: absolute;
  bottom: 0px;
  right: 0px;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1000;
  overflow: hidden;
}

<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster=""> 
  <source src="videos/video-1.webm" type="video/webm"> 
  <source src="videos/video-1.mp4" type="video/mp4"> 
  <source src="videos/video-1.ogg" type="video/ogg">
  <p>Your browser does not support the video element. Try this page in a modern browser!</p>	 
</video>

这是问题的截图证据：

该网站完全响应。这是 CSS 布局文件的直接链接：www.jossefbn.com/test/css/layout.css

【问题讨论】：

标签： android html css video background

【解决方案1】：

视频和音频无法在移动设备中自动播放。您需要某种用户交互才能开始播放（点击）。

您可以在移动设备上仅显示视频的第一帧（poster 属性）并在其上放置播放按钮。然后使用 javascript 启动视频：

document.querySelector('#video_background').play();

【讨论】：

非常感谢，我不知道。