Zusammenfassung der Methoden zum Einfügen von Videos in HTML-Seiten

Wenn Sie nun das Video-Tag auf einer Seite verwenden möchten, müssen Sie drei Situationen berücksichtigen: diejenigen, die Ogg Theora oder VP8 unterstützen (wenn damit alles in Ordnung ist) (Opera, Mozilla, Chrome), diejenigen, die H.264 unterstützen (Safari, IE 9, Chrome) und diejenigen, die es nicht unterstützen (IE6, 7, 8). Okay, schauen wir uns jetzt HTML 5-Videos aus technischer Sicht an, einschließlich der Verwendung des Video-Tags, der Medienattribute und -methoden, die von Videoobjekten verwendet werden können, und Medienereignissen.

Verwendung des Video-Tags

Der Video-Tag enthält mehrere Attribute wie src, Poster, Preload, Autoplay, Loop, Controls, Breite, Höhe und ein intern verwendetes Tag <source>. Zusätzlich zum <source>-Tag kann das Video-Tag auch den Inhalt enthalten, der zurückgegeben wird, wenn das angegebene Video nicht abgespielt werden kann.

(1) src-Attribut und Poster-Attribut

Sie können sich vorstellen, wofür das src-Attribut verwendet wird. Wie das <img>-Tag wird dieses Attribut verwendet, um die URL des Videos anzugeben. Mit dem Poster-Attribut wird ein Bild angegeben, das angezeigt werden soll, wenn die aktuellen Videodaten ungültig sind (Vorschaubild). Ungültige Videodaten können darauf zurückzuführen sein, dass das Video geladen wird, die Videoadresse falsch ist usw.

<video Breite="658"
 Höhe = "444" Quelle = "http://www.youname.com/images/first.mp4" Poster = "http://www.youname.com/images/first.png" Autoplay = "Autoplay" </video>

(2) Preload-Attribut

Auch diese Eigenschaft ist vom Namen her selbsterklärend. Mit ihr wird festgelegt, ob das Video vorab geladen werden soll. Das Attribut hat drei mögliche Werte: „Keine“, „Metadaten“ und „Auto“. Wenn diese Eigenschaft nicht verwendet wird, ist der Standardwert „auto“.

<video Breite="658"
 Höhe = "444" src = "http://www.youname.com/images/first.mp4" Poster = "http://www.youname.com/images/first.png" Autoplay = "Autoplay" Preload = "keine" </video>

Keine: Es wird kein Vorladen durchgeführt. Dieser Attributwert kann vom Seitenautor verwendet werden, um anzuzeigen, dass der Benutzer dieses Video nicht erwartet, oder um HTTP-Anfragen zu reduzieren.

Metadaten: Teilweise vorgeladen. Durch die Verwendung dieses Attributwerts geht der Seitenautor davon aus, dass der Benutzer dieses Video nicht erwartet, stellt jedoch einige Metadaten für den Benutzer bereit (einschließlich Abmessungen, erstes Frame, Titelliste, Dauer usw.).

Auto: Alles vorab laden.

(3) Autoplay-Attribut

Dies ist ein weiteres Attribut, dessen Nützlichkeit anhand des Namens klar wird. Mit dem Autoplay-Attribut wird festgelegt, ob das Video automatisch abgespielt wird. Es handelt sich dabei um ein Boolesches Attribut. Wenn es angezeigt wird, bedeutet dies, dass automatisches Abspielen erfolgt, und wenn es entfernt wird, bedeutet dies, dass kein automatisches Abspielen erfolgt.

<video Breite="658"
 Höhe = "444" src = "http://www.youname.com/images/first.mp4" Poster = "http://www.youname.com/images/first.png" Autoplay = "Autoplay" Preload = "keine" </video>

Beachten Sie, dass die Werte boolescher Attribute in HTML nicht wahr und falsch sind. Die korrekte Verwendung besteht darin, dieses Attribut im Tag zu verwenden, um „true“ anzuzeigen. In diesem Fall hat das Attribut entweder keinen Wert oder sein Wert ist immer gleich seinem Namen (hier ist automatische Wiedergabe <video autoplay /> oder <video autoplay="autoplay" />); und die Nichtverwendung dieses Attributs im Tag zeigt „false“ an (hier ist keine automatische Wiedergabe <video />).

(4) Loop-Attribut

<video Breite="658"
 Höhe = "444" src = "http://www.youname.com/images/first.mp4" Poster = "http://www.youname.com/images/first.png" Autoplay = "Autoplay" Schleife = "Schleife" </ Video>

Wie Sie sehen, wird das Loop-Attribut verwendet, um anzugeben, ob das Video in einer Schleife abgespielt werden soll. Es ist ebenfalls ein Boolesches Attribut.

(5) Kontrollattribut

<video Breite="658"
 Höhe = "444" Quelle = "http://www.youname.com/images/first.mp4" Poster = "http://www.youname.com/images/first.png" Autoplay = "Autoplay" Vorladen = "keine" Steuerung = "Steuerung" </video>

Mit der Controls-Eigenschaft wird dem Browser angezeigt, dass der Seitenersteller keine Skripts zum Generieren des Wiedergabe-Controllers verwendet hat und dass der Browser seine eigene Wiedergabe-Steuerleiste aktivieren muss.

Die Steuerleiste muss eine Steuerung für Wiedergabepause, Wiedergabefortschritt, Lautstärke usw. enthalten.

Die standardmäßige Wiedergabesteuerungsleiste jedes Browsers weist eine andere Benutzeroberfläche auf. Aufgrund eines seltsamen Problems mit meinem Browser funktionieren die Video-Tags in Firefox und Safari nicht richtig, daher kann ich im Internet nur Screenshots von diesen beiden finden.

(6) Breiten- und Höhenattribute

Dies ist ein allgemeines Attribut des Tags und muss daher nicht weiter erläutert werden.

(7) Quelltext

<video Breite="658"
 Höhe = "444" Poster = "http://www.youname.com/images/first.png" Autoplay = "Autoplay" Vorladen = "keine" Steuerung = "Steuerung"><Quelle src = "http://www.youname.com/images/first.ogv"
 /><source src="http://www.ihrname.com/images/first.ogg"
 /></video>

Das Quelltag wird verwendet, um mehrere auswählbare (der Browser kann am Ende nur eine auswählen) Dateiadressen für Medien anzugeben (da das Audiotag auch dieses Tag enthalten kann, wird hier also „Medien“ statt „Video“ verwendet) und kann nur verwendet werden, wenn das Medientag das src-Attribut nicht verwendet.

Der Browser prüft in der Reihenfolge der Quell-Tags, ob das durch den Tag angegebene Video abgespielt werden kann (möglicherweise wird das Videoformat nicht unterstützt, das Video existiert nicht usw.). Wenn es nicht abgespielt werden kann, wird zum nächsten gewechselt. Diese Methode wird hauptsächlich verwendet, um die Kompatibilität mit verschiedenen Browsern zu gewährleisten. Das Quell-Tag selbst stellt keine Bedeutung dar und kann nicht alleine stehen.

Dieses Tag enthält drei Attribute: src, Typ und Medium.

src-Attribut: wird verwendet, um die Medienadresse anzugeben, dasselbe wie das Video-Tag.

Typattribut: Wird verwendet, um den durch das src-Attribut angegebenen Medientyp anzugeben. So kann der Browser vor dem Abrufen der Medien feststellen, ob er diesen Medienformattyp unterstützt.

Medienattribut: Wird verwendet, um das Medium anzugeben, in dem das Medium verwendet wird. Wenn nicht festgelegt, ist der Standardwert „alle“, was bedeutet, dass alle Medien unterstützt werden. Denken Sie an das Medienattribut des <style>-Tags? Das Gleiche, das Gleiche.

(8) Ein vollständiges Beispiel

<video Breite="658"
 Höhe = "444" Poster = "http://www.youname.com/images/first.png" Autoplay = "Autoplay" Vorladen = "keine" Steuerung = "Steuerung"><Quelle src = "http://www.youname.com/images/first.ogv"
 /><source src="http://www.ihrname.com/images/first.ogg"
 /></video>

Dieser Code definiert ein Video auf der Seite. Das Vorschaubild dieses Videos ist der Attributwert von Poster, die Standard-Mediensteuerleiste des Browsers wird angezeigt, die Metadaten des Videos werden vorab geladen und es wird in einer Schleife abgespielt. Die Breite beträgt 900 Pixel und die Höhe 240 Pixel.

Die erste ausgewählte Videoadresse ist der src-Attributwert des ersten Quelltag, die Videokategorie ist Ogg-Video, der Videocodec ist Theora, der Audiocodec ist Vorbis und das Wiedergabemedium ist die Anzeige; die zweite ausgewählte Videoadresse wird nicht wiederholt. Wenn Sie auch mit dem Internet Explorer kompatibel sein möchten, können Sie nach dem letzten Quell-Tag einen Flash Player-Tag-Satz hinzufügen oder einen kleinen JavaScript-Code verwenden.

Zusammenfassen

Oben finden Sie eine Zusammenfassung der vom Editor vorgestellten Methode zum Einfügen von Videos in HTML-Webseiten. Ich hoffe, dass sie für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!