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.2. Abbildung 5.3. Autoplay -Attribut

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!