Github Pages 不会加载我添加的本地视频

Question

所以我有一个 index.html 文件，它将存储在我计算机中的视频应用为全屏显示，而其他文本显示在它上面。但是 github 页面似乎不起作用：后台没有运行视频。然而，当我在 Atom 中运行它时，它按预期工作。此外，我已经使用 git LFS 跟踪视频并将其推送到我的 repo，如下图所示： Picture showing my repository.

这就是网站在本地的样子。 Website in local environment

这是在 github 页面上：Website hosted by github pages (picture)

仓库链接是：https://github.com/ecoist-ste/pw-version2/blob/master/index.html

并且github页面托管的网站链接是：https://ecoist-ste.github.io/pw-version2/

下面是 index.html 和 style.css 的一部分，使视频全屏显示。

.v-header{
  height: 100vh;
  display: flex;
  align-items: center;
  color:white;
}

.container{
  max-width: 960px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin:auto;
  text-align: center;
}

.fullscreen-video-wrap{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.fullscreen-video-wrap video{

  min-width: 100%;
  min-height: 100%;
}

<header class="v-header container">
  <div class="fullscreen-video-wrap">
      <video src="background_video.mp4" autoplay muted loop>
      </video>
    </div>
    <div class="header-overlay">
  <div class="header-content container">
    <h1 style="font-size:200px">...</h1>
    <p style="font-size:100px">...</p>
  <button onClick="document.getElementById('Start').scrollIntoView();" type="button" class="btn btn-outline-info" style="font-size:50px; color: pink; border-radius:60px">Learn More</button>

</div>

    

</header>

Answer 1

关于您的存储库：

您需要使用 MP4 文件的Download 链接。

获取链接：

1. 您需要点击 MP4 文件名（带您进入预览页面）
2. 您会看到一个文件预览页面，屏幕右上角有一个Download File 按钮。
3. 右键单击按钮并选择“复制链接”。
   或者您可以点击按钮，然后在视频播放时从浏览器栏中获取地址。
4. 该链接用于在您的视频元素中用作.src=。

例如： https://github.com/XXX/XXX.github.io/raw/master/public/background_video.mp4

编辑：

像这样设置你的视频对象：

<video id="myBGvid" autoplay muted loop>
<source src="your_link_MP4" type="video/mp4">
</video>