HTML5 视频在任何浏览器中都不起作用

Posted 2023-03-15

【中文标题】HTML5 视频在任何浏览器中都不起作用

【英文标题】：HTML5 video not working in any browser

【发布时间】：2014-06-13 07:57:15

【问题描述】：

我在这里找到了同样问题的其他帖子，例如 this 或 this，但我无法解决我的问题。 起初，我在 javascript 下运行：

<script type="text/javascript">
    var options = JSON.stringify('maxSize': 320, 'videoQuality': 6, 'noaudio': true);
    ogg.encode(options);
</script>

然后我有下面的html：

<video id="video1"  controls="controls" >
    <source src="Rio2Trailer.mp4" type="video/mp4"/>
    <source src="Rio2Trailer.ogv" type="video/ogg"/>
    <source src="Rio2Trailer.webm" type="video/webm" />
    The browser does not support HTML5 video.
</video>

我尝试添加

AddType video/webm .webm
AddType video/mp4 .mp4

到 .htaccess 文件（它是空的）但没有成功。

在 Firefox 上，我收到消息：

找不到支持格式和 MIME 类型的视频。

在 Chrome 上，我只能看到控件，但它们看起来像是被禁用了，而且我也看不到屏幕中间的播放按钮。

【参考方案1】：

播放 HTML5 视频可能很棘手。有 3 件事需要检查：

检查您的 MP4 文件是否正确编码以用于 Web 交付。您可以尝试使用handbrake 或 MP4Box 或 ffmpeg 重新打包您的文件。您需要使用手刹激活“网络优化”选项（又名快速启动）。 检查您的服务器配置：对于 MIME 类型，请查看 here 部分“MIME 类型在其丑陋的头后面”。更改配置后尝试重新启动 Apache 服务器。如果它在 .htaccess 中不起作用，请尝试您的站点范围的 httpd.conf。其他需要检查的内容包括 CORS 和 206 部分内容/范围请求 检查您的脚本/HTML5：在您的 mp4 的空白页面中尝试使用准系统 HTML5 视频标签。如果它有效，那么您页面中的脚本可能会影响视频播放。您还可以在播放全高清视频时检查 CPU 负载。

我通常使用videojs mp4 sample 作为已知工作 mp4/服务器配置的参考。这适用于 mp4，但也适用于 webm/ogg（您可以使用 make web video 转码为 WebM 或 Ogg）。

让我们知道进展如何。