文章/答案/技术大牛

发布

社区首页 >问答首页 >用于移动大小的HTML背景视频？

问用于移动大小的HTML背景视频？
EN

Stack Overflow用户

提问于 2016-01-24 19:30:31

回答 3查看 823关注 0票数 3

所以我的网站有问题。当我将其作为桌面版本启动时，它会按其设想的方式打开视频：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>

然而，如果我打开它的移动版本，我会得到一个黑色的屏幕。

这里有办法让手机版本打开视频吗？因为我在寻找解决方案，人们说在电话上播放视频是不受支持的。那么，是否有办法为移动版本打开图像呢？

html

video

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-01-24 19:42:28

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

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

票数 3

Stack Overflow用户

发布于 2016-01-24 19:36:51

<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>

票数 2

Stack Overflow用户

发布于 2016-01-24 19:39:45

您可以使用多种视频格式，以便在多个浏览器(包括移动浏览器)上运行视频。所以，尝试添加一个.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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34980405

复制

相似问题

问用于移动大小的HTML背景视频？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于移动大小的HTML背景视频？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于移动大小的HTML背景视频？
EN