Fassen Sie die Methoden zum Einfügen von Videos in HTML-Webseiten zusammen

Wenn Sie nun das Video-Tag auf der Seite verwenden möchten, müssen Sie drei Situationen berücksichtigen: diejenigen, die Ogg Theora oder VP8 unterstützen (wenn diesem Ding nichts passiert) (Opera, Mozilla, Chrome) und diejenigen, die unterstützen H.264 (Safari, IE 9, Chrome) werden nicht unterstützt (IE6, 7, 8). Okay, lassen Sie uns nun HTML 5-Videos auf technischer Ebene verstehen, einschließlich der Verwendung von Video-Tags, Medienattributen und -methoden, die von Videoobjekten verwendet werden können, und Medienereignissen. In diesem Artikel wird hauptsächlich eine Zusammenfassung der Methoden zum Einfügen von Videos vorgestellt Freunde in Not können darauf verweisen, ich hoffe, es kann allen helfen.

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 e02da388656c3265154666b7c71a8ddc. Zusätzlich zum e02da388656c3265154666b7c71a8ddc-Tag kann das Video-Tag auch Inhalte enthalten, die zurückgegeben werden, 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 a1f02c36ba31691bcfe87b2722de723b-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.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>

(2) Preload-Attribut

Dieses Attribut kann auch über seinen Namen verstanden werden Mit dieser Eigenschaft wird festgelegt, 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.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

Keine: Keine Vorspannung. Mithilfe dieses Attributwerts ist es möglich, dass der Seitenautor glaubt, dass der Benutzer dieses Video nicht erwartet, oder die HTTP-Anfrage reduzieren kann.

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 an seinem Namen erkennbar ist. 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.youname.com/images/first.mp4" poster="http://www.youname.com/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“ 88395cc09d20900dd400beb3fbdab712 oder 1dda059f1671161ee9d67cb7a09ff6e7); und die Nichtverwendung dieses Attributs im Tag bedeutet falsch (keine automatische Wiedergabe ist hier 19e1f8ade8f7b36b7291bedfcc4c695e).

(4) Schleifenattribut

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>

Auf einen Blick wird das Schleifenattribut verwendet um anzugeben, ob die Video-Loop-Wiedergabe ebenfalls eine boolesche Eigenschaft ist.

(5) Controls-Attribut

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>

Das Controls-Attribut wird zur Angabe der Seite verwendet zum Browser Der Produzent verwendete kein Skript zum Generieren des Wiedergabe-Controllers und verlangte vom Browser, dass er seine eigene Wiedergabe-Steuerleiste aktiviert.

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.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

Quelle-Tag wird für Medien verwendet (da Audio). Tags können dieses Tag auch enthalten, daher wird hier „Medien“ anstelle von „Video“ verwendet), um mehrere auswählbare Dateiadressen anzugeben (der Browser kann am Ende nur eine auswählen) und können 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 c9ccee2e6ea535a969eb3f532ad9fe89-Tags nachgedacht? Gleiches Gleiches Gleiches.

(8) Ein vollständiges Beispiel

<video width="658"
 height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

Dieser Code definiert ein Video auf der Seite, der Vorschau Das Bild dieses Videos ist der Attributwert des Posters, zeigt die Standard-Mediensteuerleiste des Browsers an, lädt die Metadaten des Videos vorab und spielt es in einer Schleife mit einer Breite von 900 Pixeln und einer Höhe von 240 Pixeln ab.

Die erste ausgewählte Videoadresse ist der src-Attributwert des ersten Quelltags, die Videokategorie ist Ogg-Video, der Videocodec ist Theora, der Audiocodec ist Vorbis und das Wiedergabemedium ist der Monitor Die Adresse wird nicht noch einmal wiederholt. Wenn Sie dennoch mit dem IE kompatibel sein möchten, können Sie den Flash-Player-Tag-Satz nach dem letzten Quell-Tag hinzufügen oder ein wenig JavaScript-Code verwenden.

So verwenden Sie H5 zur Bedienung von Audio und Video

Tutorial zur HTML5-Videowiedergabe

HTML5-Video und -Audio Umsetzungsschritte

Das obige ist der detaillierte Inhalt vonFassen Sie die Methoden zum Einfügen von Videos in HTML-Webseiten zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!