HTML5 mp4视频可在Chrome和Desktop Safari中使用,但不适用于iPhone

时间:2011-06-07 17:48:21

标签: html5 iphone html5-video

我正在尝试简单地播放HTML5视频,该视频将与所有常见浏览器(包括移动设备)兼容。目前,我正在测试一个自定义视频和一个示例视频。

<video width="680" height="383" controls>
    <source src="immunize-video-1/immunize_web_h.264.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="immunize-video-1/immunize_web_h.264.ogv" type='video/ogg; codecs="theora, vorbis"'>
    [FLASH FALLBACK HERE]
</video>
<video width="680" height="383" controls>
    <source src="big-buck-bunny/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="big-buck-bunny/big_buck_bunny.ogv" type='video/ogg; codecs="theora, vorbis"'>
    [FLASH FALLBACK HERE]   
</video>

登台服务器上的结果:

  • Chrome:好的
  • 桌面Safari 5:确定(screenshot
  • iPhone Safari:热门视频无法播放(截图如下) enter image description here

什么可能导致这种情况在桌面Safari上运行而在iPhone上运行?我在video type parameters上尝试了一些变体,例如:

<source src="immunize-video-1/immunize_web_h.264.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

还尝试将编解码器属性留空:

<source src="immunize-video-1/immunize_web_h.264.mp4" type='video/mp4'>

但没有列出似乎适用于iPhone。该视频以3000 kb / s h.264的速度输出。

此外,造成问题的视频文件大小为94MB。

2 个答案:

答案 0 :(得分:5)

iOs不支持h.264提供的所有配置文件。您必须使用基线配置文件对h264进行编码,才能在iphone / ipad上播放。

答案 1 :(得分:2)

请尝试使用QuickTime Player导出针对iPhone优化的视频,请查看此博文http://www.treysmithblog.com/how-to-make-html5-videos-for-iphone-and-ipad/