缓存的视频无法在网站上加载答案

【问题标题】：Cached video doesn't load on site缓存的视频无法在网站上加载
【发布时间】：2020-08-13 16:07:38
【问题描述】：

enter code here嗨我有一个带有 html5 视频的网页，当我重新加载页面时，视频没有加载，在网络选项卡中显示状态代码 304，但视频没有加载我什至尝试过硬重新加载或禁用不起作用的缓存，奇怪的是，当它使用 vscode 实时服务器自动重新加载时，它确实加载了视频就好了这是我的代码

<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 实时服务器刷新时工作

任何帮助将不胜感激，谢谢

【问题讨论】：

请向我们展示您的代码
@behemoth 刚刚做了

标签： html html5-video browser-cache reload

【解决方案1】：

您的视频路径看起来不正确。 URL 中不允许使用空格字符，您必须对其进行编码。视频元素也看起来不正确。这是一个正确使用的example。

这是URL Encoder。

引用另一个question。

【讨论】：

视频元素看起来不正确。我更新了答案。