【问题标题】：How to play mp4 video file with HTML5 video tag on iOS (iPhone and iPad)?如何在 iOS（iPhone 和 iPad）上播放带有 HTML5 视频标签的 mp4 视频文件？
【发布时间】：2015-04-17 09:25:47
【问题描述】：

我想使用 video 标签向我的用户显示 HTML5 视频。对于 Firefox、Chrome 和 Opera WEBM 可以正常工作。在 Windows 和 Mac 上的 Safari 中，我的 MP4 版本也可以使用。我遇到的唯一问题是，它无法在 iPad 和 iPhone（当然是 Safari）上播放。

制作视频

MP4 (h.264 + acc-lc) 是这样转换的（配置文件：基线和级别 3.0 以最大程度地兼容 iOS）：

流 #0:0(eng)：视频：h264（受约束的基线）（avc1 / 0x31637661），yuv420p，640x352，198 kb/s，17 fps，17 tbr，17408 tbn， 34 tbc（默认）
流 #0:1(eng)：音频：aac (LC) (mp4a / 0x6134706D)，48000 Hz，立体声，fltp，56 kb/s（默认）

编辑： 整个 ffprobe 输出（比特率等略有变化）：

Metadata:
major_brand     : isom
minor_version   : 512
compatible_brands: isomiso2avc1mp41
encoder         : Lavf56.30.100
Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s
Stream #0:0(eng): Video: h264 (Constrained Baseline) 
(avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr, 
12800 tbn, 50 tbc (default)
Metadata:
  handler_name    : VideoHandler
Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, 
stereo, fltp, 85 kb/s (default)
Metadata:
  handler_name    : SoundHandler

我发现iOS设备的各种要求，如this和this，还提到someone在转换时添加yuv420p像素格式。

实际上 ffmpeg cmd 看起来像这样：

ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4

显示视频

使用 Modernizr，我检测“支持”哪种格式并将其添加到 src 或 video 标记。最后一件事是添加正确的 MIME 类型。对于 mp4，我添加 type="video/mp4"。 video 标签的完整代码是：

<video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"/>

我尝试了各种方法：使用自己的界面、控件和来自浏览器供应商和 video.js 的东西进行自己的实现，只是为了检查我是否对此过于愚蠢。除 iPhone 和 iPad 外，所有环境均可在上述环境中工作。

我在Video on the web，尤其是this part 上阅读了这篇文章，并且只提供具有“正确”类型的“正确”文件，而没有设置poster属性集。

我的 Apache 有

AddType video/mp4                      mp4 m4v f4v f4p
AddType video/ogg                      ogv
AddType video/webm                     webm

并且启用了字节范围。这是从服务器获取部分内容所必需的。

有人知道那里发生了什么吗？提前致谢！

编辑： Safari 和 Chrome 都在 iPad 上抛出 MEDIA_ERR_SRC_NOT_SUPPORTED 错误。编码肯定有问题。

【问题讨论】：

标签： iphone html ipad ffmpeg mp4

【解决方案1】：

尝试切换“controls”属性 - 或以不同方式定义 src。

 <video src="http://example.com/path/mymovie.mov"
         controls
         height=340 width=640
         poster="http://example.com/path/poster.jpg">
  </video>

Check out this article 'About HTML5 Audio and Video for Safari' (developers guide)

另外，对于 iPad / iPhone 的 HTML5 <video> 标签的稳定帮助是 JW player. （使用它）

 jwplayer('video').setup({
     flashplayer: '/Scripts/jwplayer/player.swf',
     file: 'seanpenn.mp4',
     autostart: false,
     controlbar: 'over',
     image: 'spicoli.jpg',
     width: 295,
     height: 214,
     skin: '/Scripts/jwplayer/glow.xml',
     stretching: 'exactfit'
 });

【讨论】：

感谢您的建议。我设置了一个试用帐户并将播放器嵌入到我的 mp4 文件中。这是错误消息：“加载媒体时出错。无法加载文件。”我想整个事情更多的是关于媒体文件的转换。有没有可能我错误配置了 ffmpeg 的东西或使用了错误的编解码器库？
我还在 mp4 容器中尝试了 mpeg4 编解码器。可悲的是同样的结果。
是的，这是可能的；尝试压缩视频！
你到底是什么意思？输入文件通常在 20 - 200 MB 左右，结果文件已经在 0.8 - 4MB 左右（参见-b:v 200K -r 17，这确实减少了文件大小）。也许我没明白重点。对不起。

【解决方案2】：

我找到了 iPad 和 iPhone 无法播放的原因。 我的文件夹已通过 htaccess 限制访问以保护 Beta 版应用程序。 Firefox 等将用户名和密码转发给所有请求，Mac 上的 Safari 再次要求提供凭据，但 iPad 和 iPhone 上的浏览器不会。为了快速检查这一点我删除了文件夹保护，它工作正常。感谢您对我的问题的所有贡献和想法！

【讨论】：