wake-up-neo.net

HTML5 - mp4-Video wird in IE9 nicht abgespielt

Ich habe ein mp4-Video, das ich im IE9 mit dem HTML5 <video>-Tag abspielen möchte. Ich habe den MIME-Typ zu IIS 7 hinzugefügt. Wenn ich also http://localhost/video.mp4 browse, wird er sowohl in Chrome als auch in IE9, aber nicht in HTML5 wiedergegeben. Chrome spielt das Video jedoch in HTML ab. Hier ist der Code:

<html>
<body>
  <video src="video.mp4" width="400" height="300" preload controls>
  </video>
</body>
</html>

Irgendwelche Ideen?

Vielen Dank

UPDATE:

Habe dieselbe Datei in Firefox 5.0 ausprobiert und es hat auch nicht funktioniert, nur Chrome kann das mp4-Video abspielen.

35
user623892

Endete mit http://videojs.com/ , um alle Browser zu unterstützen.

Damit das Video in IE9 und Chrome funktioniert, habe ich nur den HTML-Typ doc hinzugefügt und mp4 verwendet:

<!DOCTYPE html>
<html>
<body>
  <video src="video.mp4" width="400" height="300" preload controls>
  </video>
</body>
</html>
18
user623892

für IE9 habe ich festgestellt, dass ein Meta-Tag erforderlich ist, um den Modus einzustellen

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

Wenn es immer noch nicht funktioniert, ist hier sicherlich eine Lösung: Kodieren Sie das mp4 mit dem Komprimierungsformat H.264. Wenn Sie es mit dem Format mpeg4 oder divx kodieren, funktioniert es unter IE9 nicht und kann auch Google Chrome zum Absturz bringen. Dafür verwende ich Any Video Converter Freeware. Aber es könnte mit jedem guten Videotool gemacht werden.

Ich habe alle hier aufgeführten Lösungen ausprobiert und seit Tagen andere Problemumgehungen ausprobiert, aber das Problem lag in der Art, wie ich mein mp4 erstellt habe. IE9 decodiert kein anderes Format als H.264.

Ich hoffe, das hilft. Jimmy

17
Jimmy Boyd

Dan hat eine der besten Antworten, und ich würde vorschlagen, dass Sie html5test.com in Ihren Zielbrowsern verwenden, um die unterstützten Videoformate anzuzeigen.

Wie oben erwähnt, funktioniert kein einzelnes Format, und was ich verwende, ist MP4-kodiert nach H.264, WebM und einem Flash-Fallback. Dies soll ein Video zu folgenden Themen zeigen:

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>

Hinweis: Das .mp4-Video sollte im h264-Basisprofil codiert sein, damit es auf allen mobilen Geräten abgespielt werden kann.

Update: Dem Flash-Fallback wurde autoplay = "false" hinzugefügt. Dadurch wird verhindert, dass der MP4 sofort startet, wenn die Seite im IE8 geladen wird. Die Wiedergabe beginnt, sobald die Wiedergabetaste gedrückt wird.

8
user1344843

Internet Explorer 9 unterstützt MPEG4 mit H.264-Codec. Es ist jedoch auch erforderlich, dass die Datei abgespielt werden kann, sobald der Download beginnt.

Hier sind die grundlegenden Schritte zum Erstellen einer MPEG-Datei, die in IE9 funktioniert (mit avconv unter Ubuntu). Ich habe viele Stunden damit verbracht, das herauszufinden, also hoffe ich, dass es jemandem helfen kann.

  1. Konvertieren Sie das Video mithilfe des H.264-Codecs in MPEG4. Sie brauchen nichts Besonderes, lassen Sie einfach avconv die Arbeit für Sie erledigen:

    avconv -i video.mp4 -vcodec libx264 pre_out.mp4
    
  2. Dieses Video funktioniert mit allen Browsern, die MPEG4 unterstützen, außer IE9. Um Unterstützung für den IE9 hinzuzufügen, müssen Sie die Dateiinformationen in den Dateiheader verschieben, damit der Browser die Wiedergabe starten kann, sobald er mit dem Herunterladen beginnt. DIESER IS DER SCHLÜSSEL FÜR IE9 !!!

    qt-faststart pre_out.mp4 out.mp4
    

qt-faststart ist ein Quicktime-Dienstprogramm, das auch das H.264/ACC-Dateiformat unterstützt. Es ist Teil des libav-tools-Pakets.

6
Gael Lafond

Ich habe ein Basisprofil .mp4-Video, das auf einem Server abgespielt wird Und nicht auf einem anderen.

Der einzige Unterschied ist:
man gibt einen Header an "Content-Length: ..."
der andere "Trasfer-Encoding: chunked".

Ich habe herausgefunden, dass Content-Length nicht benötigt wird. Es ist nur wichtig, dass KEIN Chunked-Header vorhanden ist. Dies kann durch Deaktivieren der Komprimierung (deflate oder gzip) für .mp4-Dateien erfolgen. Wie dies getan werden kann, ist ein anderes Problem und ein anderes Thema: Wie deaktiviert man die Apache-gzip-Komprimierung für einige Mediendateien in der .htaccess-Datei?

Es kann ein anderes Serverproblem geben:
muss "Content-Type: video/mp4" geben
und NICHT "Content-Type: text/plain"

3
Balazs Nemeth

Nach allem, was ich gehört habe, ist die Videounterstützung bestenfalls minimal. 

Von http://diveintohtml5.ep.io/video.html#what-works :

Zum jetzigen Zeitpunkt ist dies die Landschaft von HTML5-Videos:

  • Mozilla Firefox (3.5 und höher) unterstützt Theora-Video und Vorbis-Audio in einem Ogg-Container. Firefox 4 unterstützt auch WebM.

  • Opera (10.5 und höher) unterstützt Theora-Video und Vorbis-Audio in einem Ogg-Container. Opera 10.60 unterstützt auch WebM.

  • Google Chrome (3.0 und höher) unterstützt Theora-Video und Vorbis-Audio in einem Ogg-Container. Google Chrome 6.0 unterstützt auch WebM.

  • Safari auf Macs und Windows-PCs (3.0 und höher) unterstützt alles, was QuickTime unterstützt. Theoretisch könnte es erforderlich sein, dass Ihre Benutzer QuickTime-Plugins von Drittanbietern installieren. In der Praxis werden dies nur wenige Benutzer tun. Sie haben also die Formate, die QuickTime „out of the box“ unterstützt. Dies ist eine lange Liste, aber WebM, Theora, Vorbis oder der Ogg-Container sind nicht enthalten. QuickTime unterstützt jedoch H.264-Video (Hauptprofil) und AAC-Audio in einem MP4-Container.

  • Mobiltelefone wie Apples iPhone und Google Android-Telefone unterstützen H.264-Video (Baseline-Profil) und AAC-Audio (Profil mit geringer Komplexität) in einem MP4-Container.

  • Adobe Flash (9.0.60.184 und höher) unterstützt H.264-Video (alle Profile) und AAC-Audio (alle Profile) in einem MP4-Container.

  • Internet Explorer 9 unterstützt alle Profile von H.264-Video und AAC- oder MP3-Audio in einem MP4-Container. Es wird auch WebM-Video abgespielt, wenn Sie einen Drittanbieter-Codec installieren, der in keiner Windows-Version standardmäßig installiert ist. IE9 unterstützt keine anderen Codecs von Drittanbietern (im Gegensatz zu Safari, bei dem alles gespielt wird, was QuickTime abspielen kann).

  • Internet Explorer 8 bietet keinerlei HTML5-Video-Unterstützung, aber praktisch alle Internet Explorer-Benutzer verfügen über das Adobe Flash-Plugin. Später in diesem Kapitel werde ich Ihnen zeigen, wie Sie HTML5-Video verwenden können, aber auf Flash zurückgreifen können.

Sie sollten auch diesen Abschnitt auf derselben Seite genau beachten:

Es gibt keine einzelne Kombination von Containern und Codecs, die in allen HTML5-Browsern funktioniert.

Dies wird sich in naher Zukunft wahrscheinlich nicht ändern.

Damit Ihr Video auf all diesen Geräten und Plattformen abrufbar ist, müssen Sie das Video mehrmals kodieren.

3
stslavik

beide Formate verwenden funktioniert in allen Browsern gut:

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

Internet Explorer und Edge unterstützen einige von Chrome unterstützte MP4-Formate nicht. Sie können ffprobe verwenden, um das genaue MP4-Format anzuzeigen. In meinem Fall habe ich diese zwei Videos:

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

Beide sind in Chrome gut spielbar, aber die erste schlägt in IE und Edge fehl. Das Problem ist, dass IE und Edge yuv444 nicht unterstützen. Sie können wie folgt in einen schärferen Farbraum konvertieren:

ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4
1
Timmmm

Wenn eine der obigen Antworten nicht funktioniert und Sie sich auf einem Apache-Server befinden, fügen Sie der .htaccess-Datei Folgendes hinzu:

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

Ich hatte ein ähnliches Problem und das Hinzufügen dieses Problems löste alle meine Wiedergabeprobleme.

1
wiz
0
snyderthing

Ohne JavaScript konnte ich nur ohne Fehler spielen:

<!--[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]-->
0
lucasgabmoreno

Versuchen Sie Folgendes und sehen Sie, ob es funktioniert:

<video width="400" height="300" preload controls>
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
0
MRR0GERS