HTML5 - La vidéo mp4 ne peut pas être lue dans IE9
J'ai une vidéo MP4 que je veux lire dans IE9 à l'aide de la balise HTML5 <video>. J'ai ajouté le type MIME à IIS 7. Par conséquent, si je navigue dans http://localhost/video.mp4, il est lu à la fois dans Chrome et IE9, mais pas dans HTML5, Chrome lit la vidéo au format HTML. Voici le code:
<html>
<body>
<video src="video.mp4" width="400" height="300" preload controls>
</video>
</body>
</html>
Des idées?
Merci
METTRE À JOUR:
Essayé le même fichier dans Firefox 5.0 et cela n'a pas fonctionné non plus, seul Chrome est capable de lire la vidéo mp4.
Nous avons fini par utiliser http://videojs.com/ pour prendre en charge tous les navigateurs.
Mais pour que la vidéo fonctionne dans IE9 et Chrome, je viens d'ajouter le type de document html5 et d'utiliser mp4:
<!DOCTYPE html>
<html>
<body>
<video src="video.mp4" width="400" height="300" preload controls>
</video>
</body>
</html>
pour IE9, j'ai trouvé qu'une balise META était nécessaire pour définir le mode
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<video width="400" height="300" preload controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag
</video>
Si cela ne fonctionne toujours pas, voici une solution: encodez le mp4 au format de compression H.264. Si vous l'encodez au format mpeg4 ou divx, sinon, cela ne fonctionnera pas sur IE9 et risque de bloquer Google Chrome. Pour ce faire, j'utilise le logiciel gratuit Any Video Converter. Mais cela pourrait être fait avec n'importe quel outil vidéo de qualité.
J'ai essayé toutes les solutions énumérées ici et essayé d'autres solutions de contournement pendant des jours, mais le problème réside dans la façon dont j'ai créé mon MP4. IE9 ne décode pas un format autre que H.264.
J'espère que ça aide, Jimmy
Dan a l'une des meilleures réponses et je vous conseillerais d'utiliser html5test.com sur vos navigateurs cibles pour voir les formats vidéo pris en charge.
Comme indiqué ci-dessus, aucun format unique ne fonctionne et ce que j'utilise est MP4 encodé en H.264, WebM et une fonction de repli flash. Ceci me laisse montrer la vidéo sur ce qui suit:
Win 7 - IE9, Chrome, Firefox, Safari, Opera
Win XP - IE7, IE8, Chrome, Firefox, Safari, Opera
MacBook OS X - Chrome, Firefox, Safari, Opera
iPad 2, iPad 3
Linux - Android 2.3, Android 3
<video width="980" height="540" controls>
<source src="images/placeholdername.mp4" type="video/mp4" />
<source src="images/placeholdername.webm" type="video/webm" />
<embed src="images/placeholdername.mp4" type="application/x-shockwave-flash" width="980" height="570" allowscriptaccess="always" allowfullscreen="true" autoplay="false"></embed> <!--IE 8 - add 25-30 pixels to vid height to allow QT player controls-->
</video>
Remarque: La vidéo .mp4 doit être codée dans le profil de base h264 pour pouvoir être lue sur tous les appareils mobiles.
Mise à jour: ajout de autoplay = "false" à la solution de secours Flash. Cela empêche le MP4 de commencer à jouer immédiatement lorsque la page est chargée sur IE8, il commencera à jouer une fois que le bouton de lecture est enfoncé.
Internet Explorer 9 prend en charge MPEG4 à l'aide du codec H.264. Mais il fallait aussi que le fichier puisse commencer à être lu dès le début du téléchargement.
Voici les étapes de base sur la façon de créer un fichier MPEG qui fonctionne dans IE9 (en utilisant avconv sur Ubuntu). J'ai passé de nombreuses heures à comprendre cela, alors j'espère que cela pourra aider quelqu'un d'autre.
Convertissez la vidéo en MPEG4 à l'aide du codec H.264. Vous n'avez besoin de rien d'extraordinaire, laissez simplement avconv faire le travail pour vous:
avconv -i video.mp4 -vcodec libx264 pre_out.mp4Cette vidéo fonctionnera sur tous les navigateurs prenant en charge MPEG4, sauf IE9. Pour ajouter la prise en charge d'IE9, vous devez déplacer les informations de fichier dans l'en-tête de fichier afin que le navigateur puisse commencer à les lire dès qu'il commence à les télécharger. CECI IS EST LA CLEF POUR IE9 !!!
qt-faststart pre_out.mp4 out.mp4
qt-faststart est un utilitaire Quicktime qui prend également en charge le format de fichier H.264/ACC. Cela fait partie du package libav-tools.
J'ai une vidéo de profil .mp4 de base qui se lit sur un serveur, Et non sur un autre.
La seule différence est:
on donne un en-tête "Content-Length: ..."
l'autre "Trasfer-Encoding: chunked".
J'ai découvert que Content-Length n'est pas nécessaire, Il est seulement important qu'il ne contienne AUCUN en-tête chunked . Cela peut être fait en désactivant la compression (deflate ou gzip) des fichiers .mp4 . Comment cela peut-il être fait est un autre problème et un autre sujet: Comment désactiver la compression Apache gzip pour certains fichiers multimédias dans un fichier .htaccess?
Il peut y avoir un autre problème de serveur:
il doit donner "Content-Type: video/mp4"
et NOT "Content-Type: text/plain"
D'après ce que j'ai entendu, le support vidéo est au mieux minimal.
De http://diveintohtml5.ep.io/video.html#what-works :
Au moment d'écrire ces lignes, voici le paysage de la vidéo HTML5:
Mozilla Firefox (version 3.5 et ultérieure) prend en charge la vidéo Theora et l’audio Vorbis dans un conteneur Ogg. Firefox 4 prend également en charge WebM.
Opera (10.5 et versions ultérieures) prend en charge la vidéo Theora et l’audio Vorbis dans un conteneur Ogg. Opera 10.60 prend également en charge WebM.
Google Chrome (version 3.0 et ultérieure) prend en charge la vidéo Theora et l’audio Vorbis dans un conteneur Ogg. Google Chrome 6.0 prend également en charge WebM.
Safari sur les Mac et les PC Windows (version 3.0 et ultérieure) prend en charge tout ce que QuickTime prend en charge. En théorie, vous pourriez demander à vos utilisateurs d'installer des plugins tiers QuickTime. En pratique, peu d'utilisateurs vont le faire. Il ne vous reste donc plus que les formats pris en charge par QuickTime. Cette liste est longue, mais elle n'inclut pas WebM, Theora, Vorbis ou le conteneur Ogg. Toutefois, QuickTime est fourni avec la prise en charge de la vidéo H.264 (profil principal) et de l’audio AAC dans un conteneur MP4.
Les téléphones mobiles tels que les téléphones Android de Google et Google Android prennent en charge la vidéo H.264 (profil de base) et l’audio AAC (profil «à faible complexité») dans un conteneur MP4.
Adobe Flash (9.0.60.184 et versions ultérieures) prend en charge la vidéo H.264 (tous les profils) et le son AAC (tous les profils) dans un conteneur MP4.
Internet Explorer 9 prend en charge tous les profils de vidéo H.264 et les formats audio AAC ou MP3 dans un conteneur MP4. Il lira également la vidéo WebM si vous installez un codec tiers, qui n’est installé par défaut sur aucune version de Windows. IE9 ne prend pas en charge les codecs tiers (contrairement à Safari, qui lit tout ce que QuickTime peut jouer).
Internet Explorer 8 ne prend pas en charge la vidéo HTML5, mais pratiquement tous les utilisateurs d'Internet Explorer auront le plugin Adobe Flash. Dans la suite de ce chapitre, je vais vous montrer comment utiliser une vidéo HTML5 tout en retombant gracieusement en Flash.
De plus, vous devriez noter cette section juste en dessous de la même page:
Aucune combinaison unique de conteneurs et de codecs ne fonctionne dans tous les navigateurs HTML5.
Cela ne devrait pas changer dans un proche avenir.
Pour que votre vidéo soit visible sur tous ces appareils et plates-formes, vous devrez encoder votre vidéo plusieurs fois.
utiliser les deux formats cela fonctionne très bien dans tous les navigateurs:
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="unbelievable.mp4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="movie.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>
Internet Explorer et Edge ne prennent pas en charge certains formats MP4 comme Chrome. Vous pouvez utiliser ffprobe pour voir le format MP4 exact. Dans mon cas, j'ai ces deux vidéos:
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a.mp4':
Metadata:
major_brand : isom
minor_version : 512
compatible_brands: isomiso2avc1mp41
encoder : Lavf56.40.101
Duration: 00:00:12.10, start: 0.000000, bitrate: 287 kb/s
Stream #0:0(und): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuv444p, 1000x1000 [SAR 1:1 DAR 1:1], 281 kb/s, 60 fps, 60 tbr, 15360 tbn, 120 tbc (default)
Metadata:
handler_name : VideoHandler
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'b.mp4':
Metadata:
major_brand : isom
minor_version : 512
compatible_brands: isomiso2avc1mp41
encoder : Lavf57.66.102
Duration: 00:00:33.83, start: 0.000000, bitrate: 505 kb/s
Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 1280x680, 504 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
Metadata:
handler_name : VideoHandler
Les deux jouent bien dans Chrome, mais le premier échoue dans IE et Edge. Le problème est que IE et Edge ne supportent pas yuv444 . Vous pouvez convertir en un espace de couleurs plus merdique comme ceci:
ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4
Si l'une des réponses ci-dessus ne fonctionne pas et que vous êtes sur un serveur Apache, ajoutez ce qui suit dans votre fichier .htaccess:
//most of the common formats, add any that apply
AddType video/mp4 .mp4
AddType audio/mp4 .m4a
AddType video/mp4 .m4v
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
J'ai eu un problème similaire et l'ajout de ce problème a résolu tous mes problèmes de lecture.
J'ai dû installer IIS Media Services 4.1 à partir de la galerie Windows Web App.
Sans JavaScript, la seule façon pour moi de jouer sans erreurs:
<!--[if lte IE 9]>
<!-- PUT HERE A FLASH PLAYER WITH video.flv -->
<![endif]-->
<!--[if gt IE 9]><!-->
<video controls class="video">
<source src="video.mp4" type="video/mp4">
<!-- REPEAT FLASH PLAYER CODE HERE -->
</video>
<!--<![endif]-->
Essayez ce qui suit et voyez si cela fonctionne:
<video width="400" height="300" preload controls>
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>