HTML5 视频标签不显示图像答案

【问题标题】：HTML5 video tag doesn't display imageHTML5 视频标签不显示图像
【发布时间】：2017-11-09 23:44:41
【问题描述】：

我有一个 HTML5 视频标签，用于显示来自移动应用的资源。用户可以使用他们的设备上传任何类型的视频。

这是标签：

<video width="100%" controls autoplay onended="closeVideo(this)">
    <source src="route.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
    <source src="route.mp4" type='video/webm; codecs="vp8, vorbis"'/>
    <source src="route.mp4" type='video/ogg; codecs="theora, vorbis"'/>
    Your browser can't play this kind of video, sorry.
</video>

大部分视频都能正常播放，但有少数视频有声音但没有图像。

问题不在于文件，因为如果下载到计算机中它们可以正常工作。我无法找出视频中不起作用的模式，它们具有不同的格式、大小、比例和 fps。

感谢您的回答

【问题讨论】：

尝试重新排序您的视频源：HTML5 video won't play in Chrome
什么移动设备/浏览器？旧版本可能对编解码器等有更多限制
也许只是一个错字，但<source src="route.mp4" type='video/ogg; codecs="theora, vorbis"'/> 绝对不正确，即这里的mp4 文件扩展名。

标签： html html5-video

【解决方案1】：

我建议使用转码服务（SYNQ.fm、Encoding.com、Amazon Elastic Transcode、Zencoder）来转换您的用户上传的视频，这样您可以保证它们能够正常播放（假设上传的视频是没有损坏或使用未知的视频编解码器创建），因为您不能假设用户将上传已经兼容的视频，以便在所有可用的各种移动设备和浏览器上播放。因此，您的代码将如下所示：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

您提供的 mp4 文件使用 H.264 编解码器进行编码，而提供的 ogg 文件使用 Ogg 编解码器进行编码。在转码方面，我建议将上传到您系统的视频文件转码为mp4和webm或ogg。这也将有助于使您的应用在播放方面更加可靠，并且由于您定义了视频输出，您将获得一致性，而不是不同的尺寸、fps、编解码器等。

这里有一些可以提供帮助的文档：https://www.w3schools.com/html/html5_video.asp，它还会告诉您哪些浏览器与哪些视频编解码器兼容，以及哪些浏览器支持 HTML5 视频。

【讨论】：