为啥某些 MP4 文件不能通过 HTML5 播放?

Posted

技术标签:

【中文标题】为啥某些 MP4 文件不能通过 HTML5 播放?【英文标题】:Why won't some MP4 files play via HTML5?为什么某些 MP4 文件不能通过 HTML5 播放? 【发布时间】:2012-07-20 06:42:23 【问题描述】:

奇怪的是,有些 MP4 文件可以在 html5 中播放,而有些则不能。这是一个测试页面http://psdtucss.com/test/test2.html,在Chrome 19.0.1084.46 m 中打开。第一个 MP4 播放,但另一个不会。什么原因。代码很简单:

<h3>the first mp4 file can play</h3> 
<p><video   controls="controls"><source src="1.mp4" type="video/mp4" />Your browser does not support the video tag.</video></p> 
<h3>but the other can't play</h3> 
<p><video   controls="controls"><source src="2.mp4" type="video/mp4" />Your browser does not support the video tag.</video></p>

我该如何解决这个问题?

我尝试了 videojs,但仍有一些 MP4 文件无法播放。测试页面在这里: http://psdtucss.com/test/test.html

【问题讨论】:

【参考方案1】:

mp4 只是 container 格式。它可能包含许多不同编解码器中的视频和音频。播放器(包括浏览器中的播放器)需要支持容器格式和所有使用的编解码器才能正常播放视频。

使用 VideoJS 绝对是个好主意,它可以为您处理很多特定于浏览器的解决方法。


但它并不能解决一个问题:所有浏览器都不支持单一的视频编解码器。 (另见Wikipedia: HTML5 video: Browser_support)

实际的解决方案可能是提供两个版本:mp4 容器中的 h264 和通常称为 webm(特定 Matroska 容器中的 VP8 视频和 vorbis 音频)的版本。有了这两个,您就可以覆盖所有主要的浏览器。


对于视频转换/重新编码,有一些可用的工具和服务。我不知道您的操作系统或要求。所以只是一个疯狂的猜测:

我用来帮助朋友在他的小博客上发布几个视频的东西是this shell script using ffmpeg 用于转换。它仍有很大的改进潜力(在所有视频质量、性能和编码方面),但应该足以开始使用。

【讨论】:

帧率曾经是个问题吗?我正在使用多个 MP4,其中两个不起作用,它们的帧速率为 29.97。一个确实有效,它的帧速率为 30fps。它们都具有相同的 H.264 编解码器。【参考方案2】:

第一个视频使用 h264 编码,除 Firefox 和 Opera 之外的所有设备都支持该编码。第二个视频使用浏览器不支持的 MPEG-4 视频编解码器。唯一被广泛支持的视频编解码器是 Theora、H.264 和 VP8。

MPEG-4 Part 2 视频编解码器不同于 MPEG-4 Part 14 容器格式

【讨论】:

这是关键。谢谢。 谢谢。 BTW,vlc->Tools > Codec Information可以查到codec,success.powerdms.com/s/article/…【参考方案3】:

您的视频 1.mp4 是使用 h.264 编码的,但视频 2.mp4 不是。 获取 MediaInfo 进行检查。

【讨论】:

【参考方案4】:

MP4 支持多种编解码器。有些播放器不支持所有编解码器(有些代码需要授权,或者有些编解码器是在浏览器编写后发布的)。

【讨论】:

@FrankLv 是的,ffmpeg / gstreamer 是开始转换视频的两个好地方。

以上是关于为啥某些 MP4 文件不能通过 HTML5 播放?的主要内容,如果未能解决你的问题,请参考以下文章

html5 video 添加MP4文件损坏?

video.js为啥有的视频可以播放,有的视频不能播放mp4格式 mp4视频格式都转成了h264和AAC,

为啥video格式的视频在MP4上不能播放

为啥 Firefox 不能从 Localhost 播放 HTML5 视频元素?

Safari html5 视频 mp4 未在 htaccess 文件夹中播放,[重复]

html5 视频标签不播放 mp4 - IIS