为什么我的视频在 html 视频标签中显示为 Chrome 中的音频？答案

【问题标题】：Why is my video displayed in html's video tag as audio in Chrome?为什么我的视频在 html 视频标签中显示为 Chrome 中的音频？
【发布时间】：2021-08-17 05:25:33
【问题描述】：

我在我的网站上上传了视频 (.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="https://onlineneta.com/backend/assets/videos/10001100.mp4" type="video/mp4">
    <source src="https://onlineneta.com/backend/assets/videos/10001100.mp4" type="video/mp4" />
  </video>
</div>

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

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

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

【问题讨论】：

“未播放” 视频在 MP4 中被编码为 H263，但 Chrome 目前只希望在 MP4 中使用 H264（即使是较新的 H265 也不支持）...解决方案是重新编码。如果要求用户重新保存视频很糟糕，那么也许让您的服务器为他们重新编码。您可以尝试使用 FFmpeg-PHP 进行服务器端重新编码或流式传输。研究该软件并在您的桌面上对其进行测试。

标签： html audio video html5-video

【解决方案1】：

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

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

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

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

编解码器名称：h264

codec long_name：H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10

H.264 支持非常普遍，因此将第一个视频重新编码为 h264 视频，它就会播放，

【讨论】：

【解决方案2】：

您的问题在于文件编码。 HTML5 支持的类型很少，可悲的是，每个浏览器只能播放这个狭窄列表中的一部分。 Html Video player plays sound but not video

【讨论】：

这是一个 MP4 文件。我怀疑这就是原因。