Wie zeige ich Videos in HTML5 an? HTML5-Videowiedergabe demo_html5-Tutorial-Fähigkeiten

Heutzutage werden die meisten Videos über Plug-Ins wie Flash angezeigt. Allerdings verfügen nicht alle Browser über die gleichen Plugins.

HTML5 gibt eine Standardmethode zum Einbinden von Videos über das Videoelement an.
In HTML5 unterstützt das Videoelement derzeit drei Formate von Videodateien:
1.Ogg = Ogg-Datei mit Theora-Videokodierung und Vorbis-Audiokodierung
2.MPEG4 = mit H.264-Video-MPEG 4-Datei mit Kodierung und AAC-Audiokodierung
3.WebM = WebM-Datei mit VP8-Videokodierung und Vorbis-Audiokodierung

Wie zeigt man also Videos in HTML5 an? Das Beispiel lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

Okay, jetzt erklären wir die Bedeutung der einzelnen Attribute im Videoelement. Wie der Name schon sagt, geht es hier um Steuerelemente sind Bedienelemente, Haha, es sind die Bedienelemente für Videowiedergabe, Lautstärke und Pause. Wenn Sie schlau sind, müssen Sie wissen, dass die in der Mitte des Videoelements eingefügten chinesischen Zeichen daran erinnern, dass der Browser des Benutzers die Verwendung von Videoformaten nicht unterstützt.

Es ist zu beachten, dass die Videodatei vom Typ MP4 sein muss, um sicherzustellen, dass sie für den Safari-Browser geeignet ist. Das Video im Ogg-Format ist für die Browser Firefox, Opera und Chrome geeignet. Internet Explorer 8 unterstützt das Videoelement nicht. In IE 9 wird es Unterstützung für das Videoelement mit MPEG4 geben.

Wenn wir nicht sicher sind, welche Videoformate unser Browser unterstützt, können wir uns die Erkennungsmethode zunächst in einem anderen Blog-Beitrag ansehen. Was soll ich tun, wenn ich mich nicht darum kümmern möchte? Wir können dies tun:

Kopieren Sie den Code

Der Code lautet wie folgt:

Das Videoelement ermöglicht mehrere Quellelemente. Das Quellelement kann verschiedene Videodateien verknüpfen. Der Browser verwendet das erste erkannte Format, sodass wir nur noch ein paar Videos in anderen Formaten vorbereiten müssen.

Als nächstes stellen wir die Attribute mehrerer Video-Tags vor
1.autoplay: Das Erscheinen dieses Attributs bedeutet, dass das Video automatisch abgespielt wird, wenn es fertig ist. Verwendung: autoplay="autoplay"
2. Kontrollen: Das Erscheinungsbild dieses Attributs bedeutet, dass dem Benutzer Steuerelemente wie Wiedergabeschaltflächen usw. angezeigt werden. Verwendung: Kontrollen = „Kontrollen“
3. Höhe: Höhe festlegen
4. Breite: Breite festlegen
5.loop: Automatische Wiedergabe, Verwendung: loop="loop"
6.preload: Das Video wird geladen und für die Wiedergabe vorbereitet, wenn die Seite geladen wird. Verwendung: preload="auto"
auto – lädt das Ganze Video, wenn die Seite geladen wird
meta – wenn die Seite Metadaten erst nach dem Laden lädt
none – Video nicht laden, nachdem die Seite geladen ist
Hinweis: Wenn Autoplay verwendet wird, wird das Vorladen ignoriert
7.src: URL des abzuspielenden Videos