javascript - 使用 HTML 背景视频创建视差效果

Question

我使用 HTML5 视频元素创建了一个具有视差效果的网页，它在我的本地机器上按预期工作。但是当我将文件上传到我的网络托管服务器并访问该网站时，背景视频没有播放，并且在屏幕上的任何地方都完全不可见，除了当我从底部足够快地向上滚动时，它的一小部分出现在导航栏下方网页。

HTML 元素:

<video loop autoplay>
 <source src="https://s3.ap-south-1.amazonaws.com/howthatworks/video.mp4" type="video/mp4">
</video>

我的背景视频元素的 CSS:

video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
margin-top: 98px;
transform: translateX(-50%) translateY(-50%);
}

对此有什么想法吗？

当我在本地硬盘驱动器上存储的文件上运行我的网站时，它运行完美。

Answer 1

请在源标签内使用视频链接的 src，如下所示。

<video loop autoplay>
  <source src="https://s3.ap-south-1.amazonaws.com/howthatworks/video.mp4" type="video/mp4">
</video>

这是 codepen demo link .