Question

我目前正在学习使用视频作为我正在开发的网站的背景。我遇到的问题是我无法让视频真正出现。我认为这与我将它们存储在文件夹中的方式有关，但在尝试了多种不同的访问文件的方法之后，我仍然无法让它们显示出来。目标是将存储在“videos”文件夹中的视频显示为我的页面背景。我的问题是，我缺少哪些元素才能使用？我已经尝试将文件移动到主文件夹以及调整CSS几次。两者都没有结果。

我目前的设置如下：

我的文件存储方式如下（我为链接道歉，我无法嵌入图片）： File Hierarchy

backgroundVideo {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background: URL(images/resBackground.jpg);
  background-size: cover;
}

<body>

  <video autoplay loop class="backgroundVideo">
        <source src="videos/resVideoBackground.mp4" type="videos/mp4"/>Your browser does not support the video tag! Please upgrade your broswer!
        <source src="videos/resVideoBackground.webm" type="videos/webm"/>Your browser does not support the video tag! Please upgrade your broswer!
        <source src="videos/resVideoBackground.ogv" type="videos/ogv"/>Your browser does not support the video tag! Please upgrade your broswer!
      </video>

</body>

非常感谢有关如何投放视频的任何指导！

Answer 1

您的文件层次结构以及从CSS和HTML引用文件的方式对我来说很好。

我注意到了一些事情。首先，在您的source元素中，正确的类型是单数video/mp4，video/webm和video/ogv。

在网站中实施背景视频时，另一种常见的策略是在不喜欢autoplay属性的浏览器上添加一些“踢”它们的JavaScript。例如（您需要在视频元素中添加id="backgroundVideo"才能生效）：

<script type="text/javascript">
    // Play the background video on Android devices that support the
    // "canplay" event listener
    var backgroundVideo= document.getElementById('backgroundVideo');
    backgroundVideo.addEventListener('canplay', function() {
        backgroundVideo.play();
    });
</script>

我会将这个脚本元素（无论是外部还是内联）添加到正文的最后。

HTML5视频未加载

1 个答案: