HTML5 – Zaawansowane wideo

Oznaczone wideo de HTML5 Mamy wiele opcji wzbogacania naszych dokumentów, aby nasze strony były bogatsze pod względem treści wizualnych i dźwiękowych, dzięki temu, że nie polegamy na wtyczki lub stron trzecich, możemy manipulować naszymi filmami w sposób, który pozwala nam bezproblemowo osiągać nasze cele.
Wstępne ładowanie wideo
Podczas pracy z cięższymi treściami, takimi jak filmy, musimy bardzo uważać, aby nie nasycić strony, ponieważ zamiast wzbogacać naszą zawartość, może to osiągnąć odwrotny efekt i spowolnić nasz dokument oraz sprawić, że przeglądanie będzie słabsze.
Przewidując to w HTML5 W elemencie wideo pozwala nam to wstępnie załadować wideo, które ma być pokazane w ten sposób, upewniając się, że mamy trochę treści przed wyświetleniem ich użytkownikowi, a tym samym nie zakłócając jego doświadczenia na naszej stronie.
W tym celu możemy użyć następujących atrybutów:
wstępne ładowanie - to atrybut, który pozwoli nam korzystać z funkcji wstępnego ładowania wideo.
Żaden - film nie zostanie załadowany, dopóki użytkownik go nie odtworzy.
metadane - wstępnie załadowane zostaną tylko metadane filmu, czyli szczegóły filmu, takie jak rozmiar, czas trwania itp.
samochód - przeglądarka może automatycznie pobrać wideo, jeśli uzna to za konieczne, przeglądarka może nawet zignorować tę instrukcję, jest to zachowanie domyślne.
Zobaczmy mały przykład kodu, jak używać tej właściwości:

 Przykład Nie można wyświetlić wideo Nie można wyświetlić wideo 

Na poniższym obrazku widzimy, jak przeglądarka interpretuje wywołanie wideo za pomocą atrybutów Żaden Tak metadane:

Należy podkreślić, że musimy w zrównoważony sposób korzystać z tej właściwości, ponieważ możemy niepotrzebnie zużywać zasoby, a także przepustowość, co może również przełożyć się na złe wrażenia z korzystania z naszej strony.
Umieść okładkę swojego filmu
Ponieważ wideo jest ważną częścią naszej strony, nie możemy pozwolić, aby pokazywał pierwszą klatkę, ponieważ może to zepsuć projekt, w tym celu możemy umieścić obraz okładki lub symbol zastępczy, dzięki temu możemy nawet kontrolować, który obraz ma być wyświetlany, jeśli użytkownik nie wydał jeszcze polecenia odtwarzania wideo, w tym celu możemy użyć atrybutów poster, w tym celu możemy zobaczyć następujący przykład kodu.

 Nie można wyświetlić przykładowego wideo  

Zobaczmy teraz, jak przeglądarka to zinterpretuje i jak zobaczy to użytkownik:

POWIĘKSZAĆ

Aby osiągnąć ten efekt, zrobiono zrzut ekranu wideo, a następnie z właściwością plakat możemy umieścić ten obraz jako okładkę naszego elementu wideo.
Na tym kończymy ten samouczek, dzięki tym nowym właściwościom możemy lepiej kontrolować sposób, w jaki możemy wyświetlać nasze filmy i w ten sposób tworzyć nowe, bogatsze i bardziej interaktywne dokumenty.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt