So verwenden Sie das Video-Tag in HTML5

Das Video-Tag in HTML5 wird zum Abspielen von Videodateien verwendet. Im Video-Tag können wir die Breite und Höhe des Fensters, die automatische Wiedergabe des Videos, die Schleifenwiedergabe und das Titelbild des Videos usw. festlegen.

HTML5 ist das nächste. Die erste Generation von HTML fügte viele neue Tags hinzu, die viele neue Funktionen implementierten. Außerdem wird der Bedarf an externen Plug-Ins reduziert und Fehler werden besser behandelt. Beispielsweise kann das Video-Tag in HTML5 effektiv den Effekt erzielen, dass Videos auf der Seite abgespielt werden. Als nächstes stellen wir Ihnen im Artikel die Verwendung des Video-Tags im Detail vor, was hoffentlich für alle hilfreich ist

[Empfohlener Kurs: HTML5-Tutorial】

Detaillierte Verwendung des HTML5-Video-Tags

wird zum Abspielen von Videodateien verwendet. wie Filme oder andere Videostreams. Sie können Textinhalte zwischen dem Start-Tag und dem End-Tag platzieren. Dies hat den Vorteil, dass einige Browser niedrigerer Versionen die Information anzeigen können, dass das Tag nicht unterstützt wird

Beispiel:

<video src="movie01.mp4" controls></video>

Breite und Höhe definieren

Wir können die Breite und Höhe dieses Videos anpassen, um seine Fenstergröße zu ändern

<video src="movie01.mp4" controls style="width:400px;height:300px;"></video>

Rendering:

Autoplay

Wir können die Eigenschaften so einstellen, dass das Video die Autoplay-Funktion aktiviert

( 1) Verwenden Sie das Autoplay-Attribut, damit der Browser die Videodatei sofort nach dem Laden abspielen kann

<video width="400"    style="max-width:90%" controls autoplay>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Wir können den stummgeschalteten Zustand auch während der automatischen Wiedergabe festlegen Das Video wird automatisch abgespielt, der Ton wird stummgeschaltet und wir können den Ton auch einschalten, indem wir auf den Lautsprecher des Players klicken

<video width="400"    style="max-width:90%" controls autoplay muted>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Rendering:

Loop-Wiedergabe
Wir können das Loop-Attribut verwenden, um die Videowiedergabe vom Anfang bis zum Ende in einer Schleife zu machen. Der Code lautet wie folgt:

<video width="400"    style="max-width:90%" controls loop>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Mediendateien vorladen

Legen Sie verschiedene Attributwerte im Preload-Attribut fest, um dem Browser mitzuteilen, wie eine Mediendatei geladen werden soll:

Auto: Zeigt an, dass der Browser die gesamte Datei automatisch herunterlädt.

Keine: Zeigt an, dass der Browser die Datei nicht im Voraus herunterladen muss.

Metadaten: Zeigt an, dass der Browser Ruft zunächst den Datenblock am Anfang der Videodatei ab. Dies reicht aus, um einige grundlegende Informationen (z. B. die Gesamtdauer des Videos, das erste Einzelbild usw.) zu ermitteln.

<video width="400" height="300" controls preload="auto">
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Eingestellt das Titelbild des Videos

Sie können das Titelbild des Videos über das Posterattribut „Titelbild“ festlegen. Der Browser verwendet dieses Bild in den folgenden drei Situationen:

(1) Der erste Frame des Videos wurde nicht geladen

(2) Setzen Sie das Preload-Attribut auf „None“

(3) Die angegebene Videodatei wurde nicht gefunden

<video width="400" height="300" controls preload="none" poster="images/5.jpg">
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

Rendering:

Zusammenfassung: Das ist alles für diesen Artikel. Ich hoffe, dieser Artikel kann jedem helfen, den Umgang mit dem Video-Tag zu erlernen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Video-Tag in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!