为什么我的视频在 Chrome 中以音频形式显示在 html 的视频标签中？

Question

我已在我的网站中上传视频 (.mp4)，但在 Chrome 中它始终显示音频。但是当我下载它并在 Windows 播放器中播放时，它可以正常显示音频和视频。

有人告诉我要转换视频然后上传，但这些视频是我们客户上传的，所以我不能告诉他们转换任何特定格式并上传，因为这是我的声誉问题，我不能对像这样的人这样说那个。

我尝试了以下代码，但它始终显示为音频，并且不显示和视频缩略图。

.bg-image {
  border: 1px solid #999;
  float: left;
}

<div class="bg-image" data-path="/10001100.mp4">
  <video width="100px" height="100px" src="/assets/videos/10001100.mp4" type="video/mp4">
    <source src="/assets/videos/10001100.mp4" type="video/mp4" />
  </video>
</div>

<div class="bg-image" data-path="/vl44.mp4">
  <video width="100px" height="100px" src="/assets/videos/vl44.mp4" type="video/mp4">
   <source src="/assets/videos/vl44.mp4" type="video/mp4" />
  </video>
</div>

您可以运行并检查上面的代码片段，其中第一个视频不显示预览，但其他视频显示预览。两个视频都是 .mp4，但一个可以工作，另一个则不能。但如果您下载第一个视频，那么它在您的计算机播放器中工作正常。

请帮助我。我真的需要这个。我在 Stack Overflow 中看到了很多问题，但没有找到适合我的解决方案。

Answer 1

在上面的代码中，第一个视频无法播放，因为 Chrome 不支持该编解码器。
视频编解码器（在 https://ffprobe.a.video 测量）是：

编解码器名称：mpeg4（即H.263）

编解码器长名称：MPEG-4 第 2 部分

第二个视频确实在 Chrome 中播放，视频编解码器是：

编解码器名称：h264

编解码器长名称：H.264 / AVC / MPEG-4 AVC / MPEG-4 第 10 部分

H.264 支持非常普遍，因此将第一个视频重新编码为 h264 视频，然后就可以播放了，

Answer 2

您的问题在于文件编码。 HTML5 支持的类型非常少，遗憾的是，每个浏览器只能播放这个狭窄列表中的一部分。 Html 视频播放器播放声音但不播放视频