Wie zeigt ich Videos in HTML5 an? HTML5 Video -Wiedergabe -Demo

Kommentar: Die meisten Videos werden über Plug-Ins (z. B. Flash) angezeigt. Allerdings haben nicht alle Browser das gleiche Plug-In, HTML5 gibt eine Standardmethode an, um Videos über Videoelemente einzuschließen, mit denen die Video-Wiedergabe abgeschlossen werden kann

HTML5 gibt eine Standardmethode an, um Videos über Videoelemente aufzunehmen.

In HTML5 unterstützt das Videoelement derzeit drei Formate von Videodateien.

1.OGG = OGG -Datei mit Theora -Videocodierung und Vorbis -Audio -Codierung

2.MPEG4 = MPEG 4 -Datei mit H.264 -Videocodierung und AAC -Audio -Codierung

3.Webm = Webm -Datei mit VP8 -Videocodierung und VORBIS -Audio -Codierung

Wie zeigt ich Videos in HTML5 an? Beispiele sind wie folgt:

<Video src = "Demo.mp4" Controls = "Controls"> Ihr Browser unterstützt dieses Videoformat nicht. </Video>

Okay, erläutern wir die Bedeutung jedes Attributs im Videoelement. Unter ihnen werden Breite und Höhe nicht erklärt. Wir sprechen hauptsächlich über Kontrollen. Wie der Name schon sagt, sind Steuerelemente Steuerelemente, haha, es handelt sich um Steuerelemente wie Video -Wiedergabe, Lautstärkepause usw. Die in der Mitte des Videoelements eingefügten chinesischen Zeichen müssen wissen, dass sie intelligent sind, und er fordert den Benutzer auf, dass der Browser die Verwendung des Videoformats nicht unterstützt.

Es ist zu beachten, dass die Videodatei, um sicherzustellen, dass es für den Safari -Browser geeignet ist, vom Typ MP4 sein muss. Die OGG -Formatvideos eignen sich für Firefox-, Opera- und Chrom -Browser. Internet Explorer 8 unterstützt keine Videoelemente. In IE 9 wird Unterstützung für Videoelemente mit MPEG4 bereitgestellt.

Wenn wir uns nicht sicher sind, welches Format der Videos unser Browser unterstützt, können wir es zuerst überprüfen. Die Erkennungsmethode ist in einem anderen Blog -Beitrag verfügbar. Wenn Sie interessiert sind, können Sie es überprüfen. Was sollten Sie dann tun, wenn Sie nicht problematisch sein möchten? Wir können das tun:

<Video Controls = "Controls">

<source src = "move.ogg" type = "Video/ogg">

<source src = "move.mp4" type = "Video/mp4">

Ihr Browser unterstützt dieses Video -Format nicht.

</Video>

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

Als nächstes werden wir die Eigenschaften mehrerer Video -Tags vorstellen.

1.AUTOPLAY: Diese Eigenschaft erscheint, dass das Video automatisch abgespielt wird, wenn es fertig ist. Verwendung: autoplay = autoplay

2.KONTROLS: Diese Eigenschaft erscheint, dass der Benutzer mit Steuerelementen wie Spieltasten usw. angezeigt wird. Verwendung: Steuerelemente = Steuerelemente

3.Height: Höhe einstellen

4. Width: Breite festlegen

5.Loop: Automatische Wiederholung, Verwendung: Schleife = Schleife

6.Preload: Das Video ist geladen und bereit, beim Laden der Seite gespielt zu werden. Verwendung: vorlad = automatisch

automatisch - Laden Sie das gesamte Video, nachdem die Seite geladen wurde

META - Nur Metadaten werden nach dem Laden der Seite geladen

Keine - Video wird nicht geladen, nachdem die Seite geladen wurde

Hinweis: Wenn Autoplay verwendet wird, wird die Vorspannung ignoriert.

7.SRC: Die URL zum Abspielen des Videos