HTML5 – Erweitertes Video

Tagged Video de HTML5 Wir haben viele Möglichkeiten, unsere Dokumente anzureichern, um unsere Seiten in Bezug auf visuelle und auditive Inhalte zu bereichern, da wir nicht auf uns angewiesen sind Plugins oder Dritte können wir unsere Videos so manipulieren, dass wir unsere Ziele problemlos erreichen können.
Video-Preload
Bei der Arbeit mit umfangreicheren Inhalten wie Videos müssen wir sehr darauf achten, dass die Seite nicht übersättigt wird, da dies, anstatt unseren Inhalt anzureichern, den gegenteiligen Effekt erzielen und unser Dokument verlangsamen und ein schlechtes Surferlebnis bieten kann.
Dies antizipieren in HTML5 Im Video-Element ermöglicht es uns, das auf diese Weise anzuzeigende Video vorab zu laden, um sicherzustellen, dass wir ein wenig Inhalt haben, bevor wir es dem Benutzer zeigen, und so seine Erfahrung auf unserer Seite nicht unterbrechen.
Dazu können wir die folgenden Attribute verwenden:
Vorspannung - ist das Attribut, das es uns ermöglicht, die Video-Preload-Funktionalität zu verwenden.
keiner - Das Video wird erst geladen, wenn der Benutzer es abspielt.
Metadaten - Es werden nur die Metadaten des Videos vorgeladen, d. h. die Details des Videos wie Größe, Dauer usw.
Wagen - Der Browser kann das Video nach Bedarf automatisch herunterladen, der Browser kann diese Anweisung sogar ignorieren, dies ist das Standardverhalten.
Sehen wir uns ein kleines Codebeispiel zur Verwendung dieser Eigenschaft an:

 Beispiel Video kann nicht angezeigt werden Video kann nicht angezeigt werden 

Im folgenden Bild sehen wir, wie der Browser den Aufruf des Videos anhand der Attribute interpretiert keiner Ja Metadaten:

Es ist wichtig zu betonen, dass wir diese Eigenschaft ausgewogen nutzen müssen, da wir unnötig Ressourcen sowie Bandbreite verbrauchen können, was auch zu einer schlechten Erfahrung bei der Nutzung unserer Seite führen kann.
Platziere ein Titelbild für dein Video
Da das Video ein wichtiger Teil unserer Seite ist, können wir es nicht den ersten Frame anzeigen lassen, da es das Design zerstören kann, dafür können wir ein Titelbild platzieren oder Platzhalter, damit können wir sogar steuern, welches Bild angezeigt werden soll, wenn der Benutzer noch nicht den Auftrag zum Abspielen des Videos gegeben hat, dafür können wir die Poster-Attribute verwenden, dafür sehen wir das folgende Codebeispiel.

 Beispielvideo kann nicht angezeigt werden  

Sehen wir uns nun ein wenig an, wie der Browser dies interpretiert und wie der Benutzer es sehen würde:

VERGRÖSSERN

Um diesen Effekt zu erzielen, wurde ein Screenshot des Videos erstellt, dann mit der Eigenschaft Poster Wir können dieses Bild als Cover unseres Videoelements platzieren.
Damit beenden wir dieses Tutorial, mit diesen neuen Eigenschaften können wir die Art und Weise, wie wir unsere Videos anzeigen können, besser steuern und auf diese Weise neue, reichhaltigere und interaktivere Dokumente erstellen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben