我使用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%);
}
有关于此的任何想法?
当我在存储在本地硬盘上的文件上运行我的网站时,它工作得很好。
请使用源标记内的视频链接的src,如下所示。
<video loop autoplay>
<source src="https://s3.ap-south-1.amazonaws.com/howthatworks/video.mp4" type="video/mp4">
</video>