html5 Video unterstützt nicht alle Browser

Question

HTML 5 Videos arbeiten in Chrome, Mozilla und Android-Geräten, aber nicht in Safari und IE arbeiten.

Ein Videoformat, das auf allen Geräten und Plattformen wiedergegeben wird? bitte zugehörigem Code zur Verfügung stellen oder Links

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png"> 
     <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4"> 
     <source src="//cdn.foo.com/bar-video.webm" type="video/webm"> 
</video> 

Answer 1

Was ist Ihr IE und Safari-Version?

Bitte versuchen, eine Nachricht in dem Video-Tag hinzufügen und sehen, wenn Sie es sehen:

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
Your browser does not support the video tag. 
</video> 

Answer 2

Betrachtet man all Browser ein töten über sein kann, wie man es dann auch zu prüfen, viel ältere Browser und Browser das sind nicht normkonform.

Wenn Sie sicher, dass Browser des Clients machen wollen Ihr Video abspielen kann, ist hier ein paar Dinge, die Sie tun können:

• implementieren Modernisiererhttps://modernizr.com/
• einen „Rückfall“ für ältere Browser verwenden, wie die <object> oder <embed> Tags

Wenn die oben für Sie nicht funktioniert, versuchen Sie Neucodierung Ihre Video-Datei, wie es mit einem weniger Pop codiert werden können Ular Container; Stellen Sie zumindest sicher, dass das Videokodierungsformat mit der Dateierweiterung übereinstimmt. Stellen Sie außerdem sicher, dass die Bild- und Audioauflösung Ihres Videos nicht zu hoch ist.

Answer 3

Leider gibt es zu diesem Zeitpunkt kein einziges Format, das auf allen Browsern abgespielt werden kann.

Wenn Sie ein gutes Gefühl für die aktuelle Situation erhalten mögen dann die Tabelle auf der Seite unter diesem Link ist in der Regel auf dem neuesten Stand (einschließlich der Verbindung, anstatt das Kopieren der Tabelle, da die Informationen so viel ändern):

• https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

Als allgemeine Regel gilt, ist MP4 die meisten unterstützten Container-Format, aber auch hier können Sie mehrere Codecs mit mehreren Profilen usw.

Es ist eine Ressource haben whic h generiert HTML5-Beispielcode, um so viele Browser wie möglich zu unterstützen (allgemein als "Video für alle" bezeichnet). Ich bin nicht sicher, wie oft sie aktualisiert wird:

• http://v4e.thewikies.com

Hier ein Beispiel für HTML5-Wiedergabe ist nur (kein Blitz Rückfall, aber man kann hinzufügen, dass, wenn man will):

<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody --> 
<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /> 
    <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" /> 
</video> 
<p> 
    <strong>Download video:</strong> <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a> 
</p> 

Sie werden sehen, dass für maximale Unterstützung, besonders für ältere Browser, Sie Ihr Video in mehreren verschiedenen Formaten benötigen.

Für die meisten Menschen wird jedoch die Verwendung von MP4 als Container und H.264 als Codec die Mehrheit Ihrer Benutzer erreichen.