gpt4 book ai didi

css - HTML5 视频未加载

转载 作者:太空宇宙 更新时间:2023-11-04 08:43:53 26 4
gpt4 key购买 nike

我目前正在学习使用视频作为我正在开发的网站的背景。我遇到的问题是我无法让视频实际出现。我相信这与我将它们存储在文件夹中的方式有​​关,但在尝试了多种不同的文件访问方法后,我仍然无法显示它们。目标是将存储在“视频”文件夹中的视频显示为我的页面背景。我的问题是,我缺少哪些元素才能使它起作用?我试过将文件移动到主文件夹中并调整 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>

非常感谢任何有关如何运行视频的指导!

最佳答案

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

我立即注意到一些事情。第一个是,在您的 source 元素中,正确的类型是单个 video/mp4video/webmvideo/ogv.

在网站中实现背景视频的另一个常见策略是添加一些 JavaScript,在不喜欢 autoplay 属性的浏览器上“踢”它们。例如(您需要将 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>

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

关于css - HTML5 视频未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43919017/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com