iphone - 如何在iOS(iPhone和iPad)上播放带有HTML5视频标签的mp4视频文件？

我想使用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属性的情况下为“right”类型的“right”文件提供服务。

我的Apache有

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

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

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

编辑: Safari和Chrome都在iPad上引发MEDIA_ERR_SRC_NOT_SUPPORTED错误。编码一定有问题。

最佳答案

尝试切换'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'
 });

关于iphone - 如何在iOS(iPhone和iPad)上播放带有HTML5视频标签的mp4视频文件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29695295/