Html5 视频不显示

Posted 2023-05-07

【中文标题】Html5 视频不显示

【英文标题】：Html5 videos not displaying

【发布时间】：2015-08-27 22:58:32

【问题描述】：

我有几个视频上传到 Hostgator（我的托管服务），我正在使用 html5 视频播放器在页面上显示它们。视频在那里（我知道是因为我能听到音频），但在 Chrome 中我看到的只是黑屏，而在 Firefox 中它根本无法播放，只是说“没有找到支持格式和 MIME 类型的视频。 "

视频文件都是我必须从 .mov 转换为 .mp4 的文件。但都是mp4文件。

当我再次从 Hostgator 下载视频时，它们是正常的，所以我认为严格来说文件本身没有任何问题。

这里可能出了什么问题？提前致谢。

【问题讨论】：

必须将服务器配置为在文件的响应标头中提供正确的 mime 类型。请咨询您的提供商如何执行此操作。

我能够将 video/mp4 MIME 添加到 .mp4 扩展名，但它仍然无法正常工作。我去了 w3schools（因为他们有一个预览页面，您可以在其中编辑代码）在 HTML5 播放器中使用 mp4 的视频，并用我的视频链接替换了他们的视频链接。我在那里得到了相同的结果；有音频，没有视频。这让我觉得这可能不仅仅是 MIME 的问题？

由于您使用的是 MP4 容器，因此请确保您使用的 H.264 视频具有 4:2:0 颜色二次采样和每个样本 8 位。

我怎么知道，如果错了怎么改？

【参考方案1】：

我想问题出在错误的编解码器上。 MP4 文件应该是 h.264。 源代码http://www.freemake.com/how_to/how_to_create_and_embed_html5_video

【参考方案2】：

网络视频很复杂，大多数浏览器支持不同的视频格式（编解码器）。要与所有浏览器兼容，您需要使用 3 种不同文件格式的每个视频：MP4、OGG、WEBM。

为了获得最大的兼容性，您的视频工作流程如下所示 喜欢：

制作一个使用 WebM (VP8 + Vorbis) 的版本。 制作另一个版本，在 MP4 容器中使用 H.264 基线视频和 AAC“低复杂度”音频。 制作另一个在 Ogg 容器中使用 Theora 视频和 Vorbis 音频的版本。 从一个元素链接到所有三个视频文件，然后回退到基于 Flash 的视频播放器。

<video   controls>
    <source src="video.mp4"  type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv"  type="video/ogg">
</video>

来源：http://diveintohtml5.info/video.html#what-works