您好，

Question

您好，

我试图将视频作为网页的背景，它似乎可以在我的电脑上运行，但不能在手机上使用。
到目前为止，视频没有显示，这就是为什么我添加了背景，但现在，在搞乱了一段时间后，我的手机试图播放视频，但它刚刚结束反而是空白（黑色）这导致缺乏背景图像和视频但是，如果我按住屏幕上的＆＃34;保存视频＆＃34; 的选项会弹出，所以我假设浏览器没有意识到应该是一个视频，它无法播放。
导出设置可能是问题吗？

HTML

<video id="bgvid" autoplay>
  <source src="media/video.webm" type="video/webm">
  <source src="media/video.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

CSS：

video#bgvid {
  position: fixed;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  z-index: -1;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: url(/img/background.jpg) no-repeat;
  background-size: cover;
  opacity: 0.25; }

视频

     File size:    6.39 MB (6,706,607 bytes)
      Duration:    1m 16s
    Dimensions:    
         Width:    1280px
        Height:    546px (arbitrary, I know)
 Constant kbps:    700

 Any further information about the file can be extracted and provided upon request.

我已尝试评论＆＃34;不透明度：0.25;＆＃34;财产，只是为了看看是什么导致Android的所有麻烦，但没有。
我实际上是在Jade和SASS中用Brackets编写所有内容，这些是已编译的（Prepros）代码。请注意。

Answer 1

一位朋友建议我使用这个：http://vodkabears.github.io/vide/
它似乎在我的桌面浏览器上工作，但不在我的手机上。
所以我想这就解决了：我不应该期望在我的手机上显示任何视频背景。

Answer 2

不知道你是否注意到vodkabears Vide.js还有一张名为＆＃34;海报的背景图片＆＃34;作为浏览器不支持视频格式的后退

查看此处的文档https://github.com/VodkaBears/Vide#readme，其中包含：

以多种格式准备视频，例如＆＃39; .webm＆＃39;，＆＃39; .mp4＆＃39;对于跨浏览器兼容性，还要添加带有.jpg，.png或.gif扩展名的海报：

我有同样的问题 - 没有针对Android的Chrome视频。我没有尝试过GIF动画 - 这可能会有效，但视频质量却不行。

Android Chrome上的背景视频为空白（黑色），适用于PC

您好，

HTML

CSS：

视频

2 个答案: