适用于移动设备的HTML背景视频？

Question

所以我的网站有问题。当我将其作为桌面版本启动时，它会按照以下方式打开视频：https://edgaraxe.net/teamhusky/

以下是视频的代码：

<div class="background-wrap">
   <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
      <source src="video/husky.mp4" type="video/mp4">
      Video not supported
   </video>
</div>

但是，如果我打开移动版本，我会看到黑屏。

有没有办法让移动版打开视频？因为我寻找解决方案，人们说它不支持在手机上播放视频。 那么有没有办法打开图像而不是移动版？

Answer 1

将参数poster添加到video标记中，如下所示：

<video .... poster="PATH_TO_IMAGE" autoplay="false">
    ....
</video>

Answer 2

<video />标记具有poster属性，该属性将显示在支持video元素的设备上，但不支持自动播放。

<video poster="URL_TO_IMAGE" id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
    <source src="video/husky.mp4" type="video/mp4">
    Video not supported
  </video>

Answer 3

您可以使用多种视频格式在多个浏览器（包括移动浏览器）上运行视频。所以，尝试添加一个.webm视频：

<div class="background-wrap">
   <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
      <source src="video/husky.mp4" type="video/mp4">
      <source src="video/husky.webm" type="video/webm">
      Video not supported
   </video>
</div>