Html5 视频在 Chrome 中无法正常工作

Question

这是我的第一个问题，我仍然是一名业余开发人员，仍处于学习阶段。我的一个 friend 给我发送了一个 .mp4 文件，我已将其转换为 .webm 文件，并将其放在同一文件夹中。目前我的 html 有这个:

<video width="1920" height="1080" controls autoplay id="video-background"> 
	<source src="/img/reel.mp4" type="video/mp4">
	<source src="/img/reel.webm" type="video/webm">
	Sorry, your browser doesn't support HTML5 video.
</video>

视频根本不显示，只显示控件。我什至没有收到“抱歉，您的浏览器不支持 HTML5 视频”。没有控制。只是视频应该出现的空白处。

我没有在服务器或任何东西上托管视频。它是一个大约 88mb 大的本地文件。它只有一分钟长的视频，意味着在后台循环播放。我可以从链接获取视频进行播放，但不能获取本地 .mp4/.webm 文件。我检查了 youtube、stackoverflow 和谷歌搜索了很多。确实需要一些帮助。

是的，我也尝试过.ogv，但仍然不起作用。我已经三次检查了文件路径，检查了视频的编码，并仔细检查了格式。一切似乎都应该顺利进行，但就是行不通。

我没有为此部分编写 CSS，只是想播放我的本地文件视频。我做错了什么以及如何解决？

Answer 1

如果您的 img 文件夹与 HTML 位于同一文件夹内。您应该删除第一个斜杠。试试这个:

<video width="1920" height="1080" controls autoplay id="video-background"> 
    <source src="img/reel.mp4" type="video/mp4">
    <source src="img/reel.webm" type="video/webm">
    Sorry, your browser doesn't support HTML5 video.
</video>

希望对你有帮助!