如何解决缓存的视频未在网站上加载
enter code here
您好,我有一个包含html5视频的网页,当我重新加载该页面时,该视频未加载,在“网络”标签中,它显示了状态码304,但是该视频却没有加载,甚至尝试硬性加载或禁用无效的缓存,奇怪的是,当使用vscode live服务器自动重新加载时,它确实加载了视频
这是我的代码
<section class="hero">
<div class="video-wrapper">
<div class="video">
<video autoplay mute loop
alt="not supported by browser">
<source src="sources/videos/hero%20background%20video%20small.mp4"
type="video/mp4">
</video>
</div>
</div>
<div class="hero-desc-wrapper">
<div class="hero-desc">
<h1>lorem ipsum</h1>
<p>lorem ipsum dolor sit amet.</p>
</div>
</div>
</section>
.hero{
position: relative;
height: 90vh;
overflow: hidden;
}
.video-wrapper{
position: absolute;
top: 0;
max-width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
video{
max-width: 100vw;
margin-top: -28px;
}
.hero-desc-wrapper{
position: absolute;
top: 0;
width: 100%;
height: 100vh;
background-color: rgba(69,128,182,0.75);
opacity: 0.75;
display: flex;
align-items: center;
justify-content: center;
}
.hero-desc{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: var(--primary-color-light);
}
.hero-desc h1{
margin: 20px;
font-size: 1.6rem;
}
它看起来与正确的语法没有任何关系,因为它在由vscode live服务器刷新时可以正常工作
任何帮助将不胜感激
解决方法
您的视频路径看起来不正确。 URL中不允许使用空格字符,您必须对其进行编码。此外,视频元素看起来也不正确。 这里是example供正确使用。
这里是URL Encoder。
引用另一个question。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。