HTML5 mp4视频可在Chrome和Desktop Safari中使用，但不适用于iPhone [英] HTML5 mp4 video working in Chrome and Desktop Safari but not iPhone

问题描述

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

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

登台服务器上的结果：

• Chrome：确定


• 桌面Safari 5：确定（的一些变体，例如：

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

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

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

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

  
  
  

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

  解决方案

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

  
  

  I am trying to simply play an HTML5 video which will be compatible with all common browsers (including mobile devices). For now, I am testing with one custom video and a sample video.

  <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>
  

  The results on a staging server:

  • Chrome: OK
  • Desktop Safari 5: OK (screenshot)
  • iPhone Safari: Top video does not play (screenshot below)

  What could cause this to work on desktop Safari but not on the iPhone? I tried a few variations on the video type parameters such as:

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

  Also tried leaving the codec attribute blank:

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

  but none listed seemed to work for the iPhone. The video was exported at 3000 kb/s h.264.

  Also, the video causing problems is a 94MB file size.

  解决方案

  iOs doesn't support all the profiles that h.264 provides. You have to encode your h264 with a baseline profile only in order for it to be playable on iphone/ipad.

  这篇关于HTML5 mp4视频可在Chrome和Desktop Safari中使用，但不适用于iPhone的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！