如何在 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 设备的各种要求，例如 this and this, also 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，我检测到哪种格式是 "supported" 并将其添加到 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, especially this part 上阅读了这篇文章，并且只提供 "right" 类型的 "right" 文件，没有 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>

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

此外，HTML5 <video> 标签 iPad / iPhone 的稳定帮助是 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'
 });

Answer 2

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

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

How to play mp4 video file with HTML5 video tag on iOS (iPhone and iPad)?

html

iphone

mp4

ffmpeg

ipad

创建视频

显示视频