如何在iOS（iPhone和iPad）上播放带有HTML5视频标签的mp4视频文件？

Question

我想使用视频标记向用户显示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设备等的各种要求， 这和这 ，也有人提到添加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之外，所有工作都在上面列出的环境中工作。

我在网上看了这篇关于视频的文章，特别是这部分 ，只提供了“正确”类型的“正确”文件而没有设置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错误。 编码必定存在问题。

Answer 1

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

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

看看这篇文章'关于HTML5音频和视频的Safari'（开发者指南）

此外，对iPad / iPhone的HTML5 <video>标签的稳定帮助是JW播放器。 （适用于它）

 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'
 });

Answer 2

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