html5 video.js verwendet alle Browser und ist mit diesen kompatibel

1. Materialien vorbereiten

video.js herunterladen: http://www.videojs.com/

2. Code

Relevante Dateien vorstellen:

Fügen Sie den HTML-Code ein:

<video id="example_video_1" class="video-js" width="640" height="410" controls="controls" autoplay preload="auto"  poster="/Images/treatment/reenex2.png">  
   <source src="/Content/videos/homepage.MP4" type=&#39;video/mp4; codecs="avc1.42E01E, mp4a.40.2"&#39; />  
   <source src="/Content/videos/homepage.oggtheora.ogv" type=&#39;video/webm; codecs="vp8, vorbis"&#39; />  
   <source src="/Content/videos/homepage.webmhd.webm" type=&#39;video/ogg; codecs="theora, vorbis"&#39; />   
</video>

Um mit verschiedenen Browsern kompatibel zu sein, werden hier drei Videoformate angegeben, aber das Problem ist immer noch ungelöst Werde später einen Plan geben.

Machen Sie einige einfache Erklärungen zu einigen Eigenschaften von Videos:

Steuerelemente: ob das Bedienfeld angezeigt werden soll

Autoplay: ob automatisch abgespielt werden soll

Vorladen: ob das Video vorinstalliert ist. Wird geladen

Poster: Wird angezeigt, wenn die aktuellen Videodaten ungültig sind (Vorschaubild)

Eine ausführlichere Einführung finden Sie in diesem Artikel: http://www .cnblogs.com/kiter/archive/2013 /02/25/2932157.html

3. Lösung der Kompatibilität

Hinweis: Der obige Javascript-Code ist für IE-Versionen geeignet, die HTML5-Elemente unterstützen. Für ältere IE-Versionen können Sie HTML5shiv verwenden. Browser, die HTML5 nicht unterstützen, unterstützen das neue HTML-Tag. htnl5shiv löst hauptsächlich das Problem, dass die von HTML5 vorgeschlagenen neuen Elemente von IE6/IE7/IE8 nicht erkannt werden. Diese neuen Elemente können nicht als übergeordnete Knoten zum Umschließen untergeordneter Elemente verwendet werden und CSS-Stile können nicht angewendet werden. Um CSS-Stile auf unbekannte Elemente anzuwenden, führen Sie einfach document.createElement(elementName) aus. Darauf basiert das Funktionsprinzip von html5shiv. Die Verwendung von html5shiv ist sehr einfach. Da IE9 HTML5 unterstützt, müssen Sie nur den folgenden Code im Kopf hinzufügen:

　

Aber Wie wir alle wissen, kann auf Google nicht zugegriffen werden.

Dann werde ich es einfach selbst herunterladen. Es liegt immer noch ein Fehler vor Durch sorgfältige Suche stellte sich heraus, dass die beiden SWF-Dateien nicht gefunden wurden. Wie wir alle wissen, sind diese beiden Videos für die Wiedergabe von Videos unerlässlich. Nehmen Sie sie dann wieder ab.

Ich habe die echte Datei auf meiner Netzwerkfestplatte freigegeben: http://pan.baidu.com/s/1ntiaul7

Es scheint, dass das Problem gelöst werden kann ist immer noch ein Fehler:

Ich habe es selbst analysiert und den Grund herausgefunden: Das src-Attribut von Video ist erforderlich

Als nächstes müssen wir das Video-Tag überprüfen

Zur Versicherung habe ich noch eine Quelle hinterlassen.

Dann wird es kein Problem geben, schauen Sie sich Chrome an, FF IE Safair, es gibt kein Problem

Schauen wir uns den Transferserver an (Voraussetzung: iis muss mit konfiguriert sein die Erweiterung .mp4 MIME, Typ: video/mpeg)

Aber das Problem trat wieder auf. Google, safair kann normal abgespielt werden, aber FF und IE können es nicht abspielen Der MiME-Typ sollte Video/mp4 sein

<script></script>