HTML5 -Video und Audio: Das Markup - SitePoint

Detaillierte Erläuterung von HTML5 -Video- und Audio -Tags: Erstellen eines reaktionsschnellen Videoplayers

Dieser Artikel stammt aus dem Buch "HTML5 & CSS3 für die Real World, 2. Ausgabe", die von Alexis Goldstein, Louis Lazaris und Estelle Weyl mitautorisiert wurde. Dieses Buch ist in wichtigen Buchhandlungen auf der ganzen Welt erhältlich und Sie können die E-Book-Version hier auch kaufen.

Kernpunkte

Die Video- und Audio-Tags von
• HTML5 ermöglichen eingebettete Video- und Audioelemente direkt im HTML-Code, ohne dass externe Plug-Ins oder Spieler erforderlich sind.
• HTML5 -Video- und Audio -Tags enthalten mehrere Attribute, um das Verhalten dieser Elemente wie Autoplay, Steuerelemente, Schleifen, gedämpft und Quelle zu steuern.
• "HTML5 -Videodatei nicht gefunden" Fehler "Auftritt" tritt normalerweise auf, wenn der Browser die in der Quelleigenschaft des Video -Tags angegebene Videodatei nicht finden oder zugreift.
• HTML5 selbst bietet keine Video-integrierte Annotationsfunktion, sondern kann mit JavaScript und CSS benutzerdefinierte Annotationen erstellen.
• Durch Einbeziehen mehrerer Quell -Tags in das Video -Tag können mehrere Quellen für HTML5 -Videos angegeben werden, wodurch die Kompatibilität mit verschiedenen Browsern maximiert wird.

Tags

Nachdem wir uns mit Container-, Codec- und Lizenzproblemen befasst haben, untersuchen wir die Markierungen von Videoelementen und ihre damit verbundenen Attribute.

Der einfachste Weg, HTML5 -Videos in eine Webseite aufzunehmen, ist wie folgt:

<video src="example.webm"></video>

Wie in den vorherigen Abschnitten erwähnt, funktioniert dies nur in begrenzten Browsern. Dies ist jedoch der kleinste Code, damit HTML5 -Videos in gewissem Maße funktionieren. In einer idealen Welt sollte es überall funktionieren - wie das IMG -Element -, aber es wird einige Zeit dauern.

Ähnlich wie beim IMG -Element kann das Videoelement auch Breite und Höhenattribute enthalten:

<video height="280" src="example.webm" width="375"></video>

Obwohl Größen in Markierungen festgelegt werden können, wirkt sich dies nicht auf das Seitenverhältnis des Videos aus. Wenn das Video im vorherigen Beispiel beispielsweise tatsächlich 375 × 240 ist und die Markierung angezeigt wird, wird das Video in dem angegebenen 280 -Pixel -Raum vertikal zentriert. Dies verhindert, dass das Video überlastet und verzerrt erscheint.

Die

Breite und Höhenattribute akzeptieren nur Ganzzahlen, und ihre Werte sind immer Pixel. Natürlich können diese Werte durch Skript oder CSS überschrieben werden.

Native Steuerelemente aktivieren

Jedes eingebettete Video ist unverzichtbar, damit Benutzer das Spielen, innehalten, anhalten, schnell vorwärts und rückwärts oder die Lautstärke einstellen können. Das Videoelement von HTML5 enthält ein Steuerungsattribut, das dies kann:

<video src="example.webm" width="375" height="280" controls></video>

Steuerelemente sind eine Boolesche Eigenschaft, daher ist kein Wert erforderlich. Die Aufnahme in das Tag sagt dem Browser, dass das Steuerelement für den Benutzer sichtbar und zugänglich macht.

Jeder Browser ist für das Erscheinungsbild der integrierten Videokontrollen verantwortlich. Abbildung 5.1 und Abbildung 5.2 zeigen die Unterschiede im Erscheinungsbild dieser Steuerelemente zwischen den Browsern.

Abbildung 5.1.

Abbildung 5.2.

Abbildung 5.3.

Abbildung 5.4.

Autoplay -Attribut

Wir würden diese Eigenschaft gerne ignorieren, weil sie in den meisten Fällen nicht wünschenswert ist. Das Boolesche Autoplay -Attribut entspricht vollständig der Bedeutung seines Namens: Es gibt der Webseite an, das Video so schnell wie möglich abzuspielen.

Normalerweise ist dies eine schlechte Praxis; Best Practices der Benutzerfreundlichkeit lassen vor, dass Geräusche und Bewegungen auf Webseiten nur ausgelöst werden sollten, wenn sie vom Benutzer angefordert werden. Das bedeutet jedoch nicht, dass das Autoplay -Attribut niemals verwendet werden sollte.

Wenn die relevante Seite beispielsweise nur ein Video enthält - dh, klickt der Benutzer auf einen Link zu einer Seite, um ein bestimmtes Video anzusehen -, kann es je nach Größe des Videos automatisch abgespielt werden, dem umgebenden Inhalt , Ansichtsplattform und Publikum.

Folgendes ist, wie diese Eigenschaft verwendet wird:

Warnung: Mobiler Browser ignoriert Autoplay

Viele (wenn nicht alle) mobilen Browser ignorieren das Autoplay -Attribut, sodass das Video immer wieder abgespielt wird, nachdem der Benutzer die Wiedergabetaste gedrückt hat. Dies ist vernünftig, wenn man bedenkt, dass die mobile Bandbreite normalerweise begrenzt und teuer ist.

<video src="example.webm"></video>

Schleifenattribut

Eine weitere verfügbare Eigenschaft, die zweimal vor dem Einsatz überlegen werden sollte, ist die Boolean Loop -Eigenschaft. Auch hier ist es leicht zu verstehen: Nach der Spezifikation wird diese Eigenschaft dem Browser anweisen, "zum Beginn der Ressource zurückzukehren, wenn er das Ende der Ressource erreicht".

Wenn Sie also eine Webseite erstellen, deren alleiniger Zweck es ist, sich vom Besucher langweilen zu lassen, kann sie den folgenden Code enthalten:

Autospiel und unendliche Schleife! Wir müssen nur die nativen Steuerelemente entfernen und können das schlechteste Trio erhalten.

Natürlich sind wie Autoplay in einigen Fällen auch Schleifen nützlich: In einem browserbasierten Spiel sollten Umgebungsgeräusche und Musik beim Öffnen kontinuierlich gespielt werden.

<video height="280" src="example.webm" width="375"></video>

Vorladungseigenschaft

im Vergleich zu den beiden zuvor diskutierten Eigenschaften ist die Vorspannungseigenschaft in vielen Fällen sehr bequem. Die Vorladungseigenschaft akzeptiert einen von drei Werten:

• Auto: Zeigt an, dass das Video und seine zugehörigen Metadaten vor dem Abspielen des Videos beginnt. Auf diese Weise kann der Browser mit dem Start von Videos schneller beginnen, wenn der Benutzer dies anfordert.
• Keine: bedeutet, dass das Video nicht im Hintergrund geladen werden sollte, bevor der Benutzer die Wiedergabetaste drückt.
• Metadaten: Ähnlich wie bei keinem, aber selbst wenn das Video selbst nicht geladen wird, kann jede Metadaten, die sich auf das Video bezieht (z. B. seine Größe, Dauer usw.), vorinoptiert werden.

Die Vorladungseigenschaft hat keine Spezifikation, die bei Auslassung aus dem Standardwert definiert ist. Dies ist sinnvoll, da Video- und/oder Metadaten automatisch auf einem gut vernetzten Desktop-Browser ohne tatsächliche nachteilige Auswirkungen vorgeladen werden können. Wählen Sie, ob Videos heruntergeladen werden sollen.

Poster Attribut

Wenn Sie versuchen, ein Video im Web anzusehen, wird normalerweise ein einzelner Bild des Videos angezeigt, um einen Trailer des Inhalts bereitzustellen. Das Poster -Attribut erleichtert es einfach, solche Anhänger auszuwählen. Diese Eigenschaft ähnelt SRC und verweist über die URL auf die Bilddatei auf dem Server.

Folgende finden Sie Videoelemente mit Poster -Attribut:

<video src="example.webm"></video>

Wenn das Poster -Attribut weggelassen wird, ist das Standard -"-Poster" der erste Frame des Videos, der unmittelbar nach dem Laden angezeigt wird.

gedämpftes Attribut

gedämpftes Attribut (Boolean Typ) steuert den Standardzustand des Audio -Tracks des Videoelements.

Hinzufügen dieser Eigenschaft führt dazu, dass der Audio -Track des Videos standardmäßig gedämpft wird, was alle Benutzerpräferenzen überschreiben kann. Dies steuert nur den Standardzustand des Elements - das durch den Benutzer, der mit der Steuerung oder JavaScript interagiert, geändert werden kann.

Fügen Sie es unserem Videoelement hinzu:

<video height="280" src="example.webm" width="375"></video>

In früheren Versionen von HTML5 -Spezifikationen gab es eine Eigenschaft namens Audio, die den Wert stummschützte. Die neue gedämpfte Eigenschaft ersetzt die inzwischen veraltete Audio -Eigenschaft.

Unterstützung für mehrere Videoformate

Fügen Sie Unterstützung hinzu

Wie wir besprochen haben, gibt es derzeit keine Möglichkeit, ein einzelnes Containerformat zu verwenden, um Ihr Video zu bedienen, obwohl dies in der Tat die Philosophie hinter dem Videoelement ist und was wir in naher Zukunft erreichen können. Um mehrere Videoformate einzuschließen, ermöglicht das Videoelement die Definition des Quellelements, sodass Sie jedem Browser das Video in seinem ausgewählten Format anzeigen können. Diese Elemente haben die gleiche Funktionalität wie das SRC -Attribut im Videoelement. Wenn Sie also das Quellelement angeben, müssen Sie SRC für das Videoelement nicht angeben.

Um die volle Browser -Unterstützung zu erzielen, wird hier die Deklaration von Quellelementen:

deklariert:

<video src="example.webm" width="375" height="280" controls></video>

Das Quellelement

(seltsam) verfügt über ein SRC -Attribut, das den Speicherort der Videodatei angibt. Es akzeptiert auch ein Typattribut, das das Containerformat der angeforderten Ressource angibt. Mit dieser nachfolgenden Eigenschaft können der Browser feststellen, ob er verwandte Dateien abspielen kann, wodurch sie unnötig nicht unterstützte Formate herunterladen kann.

Mit dem Typ

Typ -Attribut können auch Codec -Parameter angegeben werden, die die Video- und Audio -Codecs für die angeforderte Datei definieren. Das Folgende ist das Quellelement mit dem angegebenen Codec: <🎜>

<video src="example.webm"></video>

Sie werden feststellen, dass die Syntax des Typs des Typs leicht so geändert wurde, dass sie Container- und Codec -Werte anpassen. Die um den Wert verwendeten doppelten Zitate wurden in einzelnen Zitate geändert, und ein weiterer Satz von verschachtelten Doppelzitaten wird speziell im Codec verwendet.

Dies mag auf den ersten Blick ein bisschen verwirrend sein, aber in den meisten Fällen, sobald Sie eine Reihe von Möglichkeiten haben, Ihre Videos zu codieren (die wir später in diesem Kapitel diskutieren werden), kopieren und fügen Sie die Werte einfach ein und fügen Sie es ein. Es ist wichtig, dass Sie den richtigen Wert für die angegebene Datei definieren, um sicherzustellen, dass der Browser bestimmen kann, welche (falls eine) Datei sie abspielen kann.

Hinweis: Welche Formate brauchen Sie?

Abhängig von der Zielgruppe Ihrer Website benötigen Sie möglicherweise nicht drei Quellelemente, um den vollständigen Browser -Support zu erhalten. Die Unterstützung für Video- und Audio -Codecs und Container ist großartig. Möglicherweise benötigen Sie nur ein oder zwei Kombinationen. Um zu entscheiden, welche Formate verwendet werden sollen, lesen Sie unbedingt die neuesten Browser -Support -Informationen, auf die ich verwenden kann.

Quellreihenfolge

Die drei Quellelemente werden als untergeordnete Elemente des Videoelements platziert, und der verwendete Browser wählt ein beliebiges Container-/Codec -Format aus, das er erkennt - laden Sie nur die Ressourcen herunter, die sie benötigt, und ignorieren andere Ressourcen. Nachdem wir drei Dateiformate deklariert haben, sieht unser Code jetzt so aus:

<video height="280" src="example.webm" width="375"></video>

Sie werden feststellen, dass unser Code jetzt nicht über das SRC -Attribut im Videoelement verfügt. Wie bereits erwähnt, überschreibt auch zusätzlich zu Redundanz alle im Quellelement definierten Videodateien, sodass sie in diesem Fall weggelassen werden müssen.

Was soll ich tun, wenn ein Browser, der keine HTML5 -Videos unterstützt?

Die drei in unserem Videoelement enthaltenen Quellelemente werden alle modernen Browser abdecken, aber wir haben noch nicht sichergestellt, dass unsere Videos in älteren Browsern abspielen werden. Wie bereits erwähnt, haben Sie möglicherweise noch eine beträchtliche Anzahl von Benutzern, die Browser verwenden, die HTML5 -Videos nicht unterstützen. Die meisten dieser Benutzer befinden sich vor dem Internet Explorer 9 in einer bestimmten Version.

Um das Prinzip der eleganten Herabstufung aufrechtzuerhalten, ist das Videoelement so gestaltet, dass ältere Browser auf andere Weise auf Videos zugreifen können. Jeder Browser, der das Videoelement nicht erkennt, ignoriert es einfach und seine childenden Elemente der Quelle. Wenn das Videoelement jedoch Inhalte enthält, den der Browser als gültiges HTML erkennt, wird der Inhalt gelesen und angezeigt.

Was können wir für diese nicht unterstützten Browser bereitstellen? Laut Adobe haben mehr als 1 Milliarde Desktop -Benutzer das Flash Player -Plugin auf ihren Systemen installiert. Die meisten dieser Flash-Plug-in-Instanzen sind Version 9 oder höher und unterstützen das MPEG-4-Video-Containerformat. In diesem Sinne können wir unsere Videos als Fallback als Fallback deklarieren, damit Internet Explorer 8 und früher (und andere ältere Browser, die HTML5 -Videos nicht unterstützen), als Fallback deklarieren können. Hier ist der komplette Code für das Video auf dem HTML5 Herald , der den Flash -Fallback -Code enthält:

<video src="example.webm" width="375" height="280" controls></video>

wir werden zum Detail überspringen, wie dieser neu hinzugefügte Code funktioniert (es handelt sich doch kein Buch über Flash!), Aber hier sind einige Dinge zum Hinzufügen dieses Tags:

• Die Breite und Höhenattribute im Objektelement sollten mit denen des Videoelements übereinstimmen.
• Um Dateien abzuspielen, verwenden wir den Open-Source-JW-Player von LongTail Video, der für den nicht kommerziellen Gebrauch kostenlos ist. Sie können jedoch jeden von Ihnen gefallenen Video-Player verwenden.
• Flash -Videocode hat eine eigene Sicherung - Wenn der Flash -Videocode nicht funktioniert, wird die Bilddatei angezeigt.
• Das vierte Paramelement definiert die zu verwendende Datei (Beispiel.MP4). Wie bereits erwähnt, unterstützen die meisten Flash-Player-Instanzen jetzt das Spielen von Videos mit dem MPEG-4-Containerformat, sodass keine anderen Videoformate codiert werden müssen.
• HTM5 -fähige Browser, die HTML5 -Videos unterstützen, ignorieren alle Inhalte in dem Videoelement, das nicht das Quell -Tag ist, wie in der Spezifikation angegeben. Daher ist der Fallback in allen Browsern sicher.

Zusätzlich zu Flash -Fallback -Inhalten können Sie einen optionalen Download -Videolink angeben, mit dem Benutzer auf eine lokale Kopie des Videos zugreifen und ihn ansehen können, wenn sie kostenlos sind. Dadurch wird sichergestellt, dass niemand das Video nicht ansehen kann.

Der letzte Punkt ist hier zu erwähnen, dass Ihre Website wie das zusätzliche Quellelement möglicherweise keine Besucher von nicht unterstützten HTML5-Video-Browsern hat oder Sie sich möglicherweise nicht um eine kleine Anzahl von Benutzern kümmern, die ältere Browser verwenden. In beiden Fällen können Sie den Flash -Fallback -Inhalt leicht weglassen und so den Code vereinfachen.

FAQs für HTML5 -Video- und Audio -Tags

Was sind HTML5 -Video- und Audio -Tags?

HTML5 -Video- und Audio -Tags ist eine in HTML5 eingeführte Funktion, mit der Sie Video- und Audioelemente direkt in HTML -Code einbetten können. Dadurch wird die Notwendigkeit von externen Plug-Ins oder Spielern beseitigt und Benutzern ein nahtloses Multimedia-Erlebnis bietet. Das Tag besteht aus <video></video> und <audio></audio> -Tags und einigen Eigenschaften, mit denen Sie das Verhalten dieser Elemente wie Autoplay, Kontrollpersonen, Schleifen, gedämpft und Quelle steuern können.

Warum bekomme ich den Fehler "HTML5 -Videodatei nicht gefunden"?

"HTML5 -Videodatei nicht gefunden" Fehler "Auftritt" tritt normalerweise auf, wenn der Browser die in der Quelleigenschaft des <video></video> -Tags angegebene Videodatei nicht finden oder zugreifen kann. Dies kann durch eine Vielzahl von Gründen verursacht werden, wie beispielsweise falsche Dateipfade, Löschung der Datei oder Serverprobleme. Stellen Sie sicher, dass der Dateipfad korrekt ist und die Videodatei zugänglich ist, um diesen Fehler zu beheben.

Wie füge ich meinen HTML5 -Videos Kommentare hinzu?

Hinzufügen von Kommentaren zu HTML5 -Videos umfasst das Hinzufügen von Text, Formen oder anderen Elementen in das Video, um weitere Informationen bereitzustellen oder bestimmte Teile des Videos hervorzuheben. Während HTML5 keine integrierte Annotationsfunktionen bietet, können Sie mit JavaScript und CSS benutzerdefinierte Annotationen erstellen. Alternativ können Sie Online-Tools wie Veed.io verwenden, die benutzerfreundliche Videoanmerkungen anbieten.

Wie löst ich den Fehler "HTML5 -Videodatei nicht gefunden"?

Lösen Sie den Fehler "HTML5 -Videodatei nicht gefunden", einschließlich der Identifizierung der Ursache des Fehlers und der Lösung. Wenn der Dateipfad falsch ist, korrigieren Sie ihn. Wenn die Datei gelöscht wurde, stellen Sie sie wieder her oder ersetzen Sie sie durch eine neue Datei. Wenn ein Serverproblem vorliegt, wenden Sie sich bitte an Ihren Serveradministrator oder Hosting -Anbieter, um Unterstützung zu erhalten. In einigen Fällen kann die Videodatei beschädigt werden. In diesem Fall müssen Sie die Datei reparieren oder ersetzen.

Warum kann mein HTML5 -Video nicht in Firefox abspielen?

Wenn Ihre HTML5 -Videos nicht in Firefox abgespielt werden, kann dies aus verschiedenen Gründen liegen. Firefox unterstützt das im Quellattribut des <video></video> -Tags angegebene Videoformat möglicherweise nicht. Browser können auch Videos aufgrund von Sicherheits- oder Datenschutzeinstellungen blockieren. Überprüfen Sie das Videoformat und die Browsereinstellungen, um dieses Problem zu beheben.

Wie kann ich beschädigte HTML5 -Videodateien beheben?

Reparatur von beschädigten HTML5 -Videodateien umfasst die Verwendung von Videoreparaturwerkzeugen. Diese Tools analysieren beschädigte Dateien und versuchen, Fehler oder Probleme zu beheben, die verhindern, dass die Dateien korrekt abgespielt werden. Einige beliebte Video -Reparaturwerkzeuge sind Stern Video Reparatur und Wondershare Reparaturit.

Wie füge ich in meinem HTML5 -Video Steuerelemente hinzu?

Sie können Steuerelemente für HTML5 -Videos hinzufügen, indem Sie das Steuerungsattribut in das <video></video> -Tag einbeziehen. Diese Eigenschaft fügt dem Video eine Reihe von Standardsteuerungen hinzu, einschließlich Spielen/Pause, Lautstärke und Vollbildschaltflächen. Das Steuerelement wird angezeigt, wenn der Benutzer über das Video schwebt.

Kann ich mein HTML5 -Video automatisch abspielen?

Ja, Sie können automatisch HTML5 -Videos abspielen, indem Sie das Autoplay -Attribut in das <video></video> -Tag einbeziehen. Denken Sie jedoch daran, dass viele Browser blockieren, die automatisch Videos mit Sounds abspielen, um eine Störung der Benutzer zu verhindern. Um sicherzustellen, dass Ihre Videos automatisch abgespielt werden, sollten Sie mit der gedämpften Eigenschaft gedämpft erwarten.

Wie schleife ich mein HTML5 -Video?

Sie können HTML5 -Videos durchsuchen, indem Sie Schleifenattribute in das <video></video> -Tag einbeziehen. Diese Eigenschaft bewirkt, dass das Video von Anfang an nach der Wiedergabe von vorne beginnt und eine kontinuierliche Schleife erstellt.

Kann ich in HTML5 -Video mehrere Quellen abspielen?

Ja, Sie können mehrere Quellen für HTML5 -Videos angeben, indem Sie mehrere <video></video> -Tags in das <source></source> -Tag einbeziehen. Der Browser verwendet die erste Quelle, die er spielen kann. Auf diese Weise können Sie mehrere Videoformate für verschiedene Browser zur maximalen Kompatibilität bereitstellen.

Das obige ist der detaillierte Inhalt vonHTML5 -Video und Audio: Das Markup - SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!