嵌入式html背景视频（mp4，webm，ogg）无法在网站上播放-潜在的MIME问题？

Question

我正在尝试将保存在计算机上的视频（与HTML，CSS和JavaScript文件保存在同一文件中）作为背景视频嵌入到网站中，但无法播放。这是我正在使用的代码：

<video controls width=100% playsinline preload="true" autoplay loop muted>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
</video> 

尝试了广泛的研究，却不知道为什么它不能在任何浏览器（Safari，Chrome和Firefox）中都无法播放。我在想这可能与MIME类型有关，还是需要将其保存在其他位置？

在Chrome或Safari上未收到错误消息，但同时在Firefox上却收到“ X”消息：“未找到具有受支持的格式和MIME类型的视频”。我尝试通过所有这些浏览器播放视频，但它们的播放效果还不错。只是当我尝试使用上面的代码嵌入它们时，它们才起作用。出现视频播放器，但播放器为黑色，并且播放按钮不起作用。任何想法将不胜感激！具体来说，非常好奇为什么在我遇到的每个网站上都建议使用上面的代码时，上述代码不起作用。谢谢！