HTML5 vidéo mp4 de travail dans le Chrome et le Bureau de Safari, mais n'a pas d'iPhone

Je suis en train de lire une vidéo HTML5 qui sera compatible avec tous les navigateurs les plus courants (y compris les appareils mobiles). Pour l'instant, je suis en train de tester avec une vidéo personnalisée, et un échantillon de la vidéo.

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

Les résultats sur un serveur de test:

  • Chrome: OK
  • Bureau Safari 5: OK (capture d'écran)
  • iPhone Safari: Top la vidéo ne fonctionne pas (capture d'écran ci-dessous)
    HTML5 vidéo mp4 de travail dans le Chrome et le Bureau de Safari, mais n'a pas d'iPhone

Ce qui a pu provoquer cela de travailler sur le bureau de Safari, mais pas sur l'iPhone? J'ai essayé quelques variations sur le vidéo paramètres de type tels que:

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

Aussi essayé de quitter le codec attribut vide:

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

mais aucun inscrit semblait fonctionner pour l'iPhone. La vidéo a été exporté à 3000 kb/s h.264.

Aussi, la vidéo à l'origine des problèmes est un 94MB la taille du fichier.

OriginalL'auteur Mike Eng | 2011-06-07