HTML5 视频突然不工作，以前工作

Question

所以我正在制作个人作品集，我有一个视频作为封面部分。以前的封面视频没有任何缺陷。我尝试将封面照片更改为更有活力和美观的照片，但该视频不起作用。它显示为静止图像。我尝试还原视频，但仍然无效。我怀疑它与代码有关，因为以前它有效，我唯一改变的是引用不同的视频。我尝试清除所有浏览器数据、缓存等所有内容，但都没有用。

注意:这也不是它已本地化的事实，因为这是我之前将视频调用到页面的方式，它仍然有效。我部署的其他元素将视频本地存储到 Assets 文件夹中，它们也可以正常运行。

这是我投资组合中视频部分的代码(HTML 和 CSS):

.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
    z-index: -1
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
    z-index: -1
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
    z-index: -1
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
    z-index: -1
}
.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
    z-index: -1
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    z-index: -1
}
.video-container video {
    position: absolute;
    top: -30px;
    z-index: 0;
    bottom: 0;
    z-index: -1
}
.video-container video.fillWidth {
    width: 100%;
    z-index: -1
}

.text-center{
  color: white;
}

.btn btn-outline-light btn-lg text-center{
    position: fixed;
    top: -100px;
    left: -50px;
}

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}


.card-title{
    color: black;
}

<div class="container-a">
<div class="homepage-hero-module">
    <div class="video-container">
            <div class="text">
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <h2 class="text-center">Christopher Bacani</h2>
                    <p class="text-center">Full Stack Web Development | Mobile App Development | Marketing/Advertising</p>
                    <div class="wrapper">
                            <button class="btn btn-outline-light btn-lg text-center" type="button">Learn More</button>
                        </div>
                </div>
        <div class="filter"></div>
        <video autoplay loop class="fillWidth">
         <source src="./assets/video/portfolio-cover-2.mp4" type="video/mp4">Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
    </div>
</div>
</div>

如果有人知道如何修复它，请帮忙，因为我不知道发生了什么，突然整个事情都不起作用了。

Answer 1

您的这段代码在仅更改视频链接的源后可以正常工作。当我查看本地存储的视频时，它也能正常工作。因此，请尝试解决该问题，并且可以通过评论讨论混淆。

<div class="container-a">
<div class="homepage-hero-module">
    <div class="video-container">
            <div class="text">
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <h2 class="text-center">Christopher Bacani</h2>
                    <p class="text-center">Full Stack Web Development | Mobile App Development | Marketing/Advertising</p>
                    <div class="wrapper">
                            <button class="btn btn-outline-light btn-lg text-center" type="button">Learn More</button>
                        </div>
                </div>
        <div class="filter"></div>
        <video autoplay loop class="fillWidth" controls>
         <source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4">Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
    </div>
</div>
</div>