缓存的视频未在网站上加载

问题描述

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。