In diesem Artikel wird hauptsächlich eine Zusammenfassung der Methoden zum Einfügen von Videos in HTML-Webseiten vorgestellt. Freunde, die es benötigen, können darauf verweisen.
Wenn Sie nun das Video-Tag auf der Seite verwenden möchten, müssen Sie dies tun Betrachten Sie drei Situationen. Es unterstützt Ogg Theora oder VP8 (wenn diesem Ding nichts passiert) (Opera, Mozilla, Chrome), unterstützt H.264 (Safari, IE 9, Chrome) und unterstützt es nicht (IE6, 7, 8). ). Okay, jetzt wollen wir HTML 5-Video auf technischer Ebene verstehen, einschließlich der Verwendung von Video-Tags, Medieneigenschaften und -methoden, die von Videoobjekten und Medienereignissen verwendet werden können.
Verwendung des Video-Tags
Video-Tag enthält mehrere Attribute wie src, Poster, Preload, Autoplay, Schleife, Steuerelemente, Breite, Höhe usw. und ein internes Tag
(1) src-Attribut und Poster-Attribut
Sie können sich vorstellen, wofür das src-Attribut verwendet wird. Wie das -Tag wird dieses Attribut verwendet, um die Adresse des Videos anzugeben. Das Poster-Attribut wird verwendet, um ein Bild anzugeben, das angezeigt werden soll (Vorschaubild), wenn die aktuellen Videodaten ungültig sind. Ungültige Videodaten können bedeuten, dass das Video geladen wird, die Videoadresse möglicherweise falsch ist usw.
<video width="658" height="444" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/images/first.png" autoplay="autoplay"></video>
(2) Preload-Attribut
Dieses Attribut kann auch anhand seines Namens verstanden werden. Dieses Attribut wird verwendet, um zu definieren, ob das Video vorgeladen ist . Das Attribut verfügt über drei optionale Werte: none, metadata und auto. Wenn dieses Attribut nicht verwendet wird, ist der Standardwert auto.
<video width="658" height="444" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/images/first.png" autoplay="autoplay" preload="none"></video>
Keine: Keine Vorspannung. Bei Verwendung dieses Attributwerts ist es möglich, dass der Seitenautor glaubt, dass der Benutzer dieses Video nicht erwartet, oder die HTTP-Anfrage reduziert.
Metadaten: Teilweise vorinstalliert. Die Verwendung dieses Attributwerts bedeutet, dass der Seitenautor davon ausgeht, dass der Benutzer dieses Video nicht erwartet, dem Benutzer jedoch einige Metadaten zur Verfügung stellt (einschließlich Abmessungen, erstes Bild, Titelliste, Dauer usw.).
Auto: Alles vorinstalliert.
(3) Autoplay-Attribut
ist ein weiteres Attribut, dessen Verwendung anhand seines Namens erkannt werden kann. Mit dem Autoplay-Attribut wird festgelegt, ob das Video automatisch abgespielt wird. Es handelt sich um ein boolesches Attribut. Wenn es erscheint, bedeutet es automatische Wiedergabe. Wenn es entfernt wird, bedeutet es keine automatische Wiedergabe.
<video width="658" height="444" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/images/first.png" autoplay="autoplay" preload="none"></video>
Beachten Sie, dass die Werte boolescher Attribute in HTML nicht wahr und falsch sind. Die korrekte Verwendung besteht darin, dieses Attribut in einem Tag zu verwenden, um „true“ anzugeben. Zu diesem Zeitpunkt hat das Attribut entweder keinen Wert oder sein Wert entspricht seinem Namen (hier ist „Autoplay“ oder ); und die Nichtverwendung dieses Attributs im Tag bedeutet falsch (keine automatische Wiedergabe ist hier ).
(4) Schleifenattribut
<video width="658" height="444" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/images/first.png" autoplay="autoplay" loop="loop"></video>
Auf einen Blick wird das Schleifenattribut verwendet, um anzugeben, ob das Video in einer Schleife abgespielt wird ist ebenfalls ein boolesches Attribut.
(5) Controls-Attribut
<video width="658" height="444" src="http://www.php.cn/images/first.mp4" poster="http://www.php.cn/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>
Das Controls-Attribut wird verwendet, um dem Browser anzuzeigen, dass der Seitenautor kein Skript zum Generieren verwendet hat Der Wiedergabe-Controller muss durchsucht werden. Der Browser aktiviert seine eigene Wiedergabe-Steuerungsleiste.
Die Steuerleiste muss Wiedergabepausensteuerung, Wiedergabefortschrittssteuerung, Lautstärkeregelung usw. umfassen.
Die Standard-Wiedergabesteuerleiste jedes Browsers unterscheidet sich in der Benutzeroberfläche. Aufgrund eines seltsamen Problems mit meinem Browser funktionieren die Video-Tags von Firefox und Safari nicht richtig, sodass ich online nur Screenshots dieser beiden finden kann.
(6) Das Breitenattribut und das Höhenattribut
sind selbstverständlich übliche Attribute von Tags.
(7) Quell-Tag
<video width="658" height="444" poster="http://www.php.cn/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.php.cn/images/first.ogv" /><source src="http://www.php.cn/images/first.ogg" /></video>
Quell-Tag wird für Medien verwendet (da das Audio-Tag auch dieses Tag enthalten kann, werden daher Medien verwendet (hier anstelle von Video) gibt mehrere auswählbare Dateiadressen an (der Browser kann am Ende nur eine auswählen) und kann nur verwendet werden, wenn das Medien-Tag nicht das src-Attribut verwendet.
Der Browser prüft, ob das durch das Tag angegebene Video in der Reihenfolge des Quell-Tags abgespielt werden kann (möglicherweise wird das Videoformat nicht unterstützt, das Video existiert nicht usw.). nicht abgespielt werden kann, wechseln Sie zum nächsten. Diese Methode wird hauptsächlich verwendet, um mit verschiedenen Browsern kompatibel zu sein. Das Source-Tag selbst hat keine Bedeutung und kann nicht alleine erscheinen.
Dieses Tag enthält drei Attribute: src, type und media.
src-Attribut: Wird verwendet, um die Adresse des Mediums anzugeben, genau wie das Video-Tag.
Type-Attribut: Wird zur Beschreibung des durch das src-Attribut angegebenen Medientyps verwendet und hilft dem Browser zu ermitteln, ob er diese Kategorie von Medienformaten unterstützt, bevor er die Medien abruft.
Medienattribut: Wird zur Beschreibung des Mediums verwendet, in dem das Medium verwendet wird. Wenn nicht festgelegt, ist der Standardwert „all“, was angibt, dass alle Medien unterstützt werden. Haben Sie über das Medienattribut des
