Więcej niż obrazy i podstawowe reklamy wideo w internecie

Poznaj podstawy tworzenia filmów. zwiększać zaangażowanie.

Czy rozważasz dodanie filmu do swojej witryny? Wraz z tym, jak urządzenia i połączenia sieciowe stają się coraz szybsze i bardziej wydajne, możesz zacząć wykorzystywać do tworzenia stron internetowych nie tylko obrazy, ale też filmy. Badania pokazują, że strony internetowe z filmami zwiększają zaangażowanie i sprzedaż. Nawet jeśli nie masz jeszcze filmów w swoich witrynach, prawdopodobnie wkrótce je dodasz.

Z dużą dozą prawdopodobieństwa pliki wideo dodane do witryny będą największymi plikami, które są pobierane. Dlatego tak ważne jest, aby pliki były tworzone z myślą o szybkim i stabilnym odtwarzaniu przez wszystkich klientów. Chociaż film może zwiększać zaangażowanie i zadowolenie klientów, film, który się nie odtwarza lub zacina podczas odtwarzania, może powodować frustrację klientów. W tym artykule skupiamy się na korzystaniu z tagu HTML5 <video> do przesyłania filmów, dlatego nie będziemy omawiać strumieniowego przesyłania filmów.

Zaczynamy.

Tag <video>

To oczywiste, prawda? Aby dodać film, musisz dodać tag <video>, wskazać źródło i rozpocząć proces.

<video src="myVideo.mp4">

Masz rację. To wszystko, czego potrzebujesz, aby dodać film do sieci. Możesz jednak dodać do tagu wideo wiele atrybutów, aby poprawić układ i dostarczanie filmu.

Tag <source>

Najlepszym sposobem na poprawę dostarczania filmów w internecie jest optymalizacja plików przesyłanych do przeglądarki. Aby to zrobić, użyj tagu <source>:

<video>
 
<source src="myWebmVideo.webm" type="video/webm">
 
<source src="myh265Video.mp4" type="video/mp4">
 
<source src="myh264Video.mp4" type="video/mp4">
</video>

Ten plik odwołuje się do 3 osobnych plików źródłowych. Przeglądarka zaczyna od góry i wybiera pierwszy format oraz kodek, których może użyć. W świecie wideo format pliku, zwykle nazywany kontenerem, może być zapisywany za pomocą różnych kodeków, z których każdy ma inne atrybuty. (więcej informacji). W tym przykładzie pierwszym wyborem jest format WebM (który można zakodować za pomocą kodeków VP8 lub VP9), który w momencie pisania tego tekstu jest obsługiwany przez 78% użytkowników na całym świecie. Drugim wyborem jest kodek H.265 w formacie mp4, który jest obsługiwany w iOS i nowszych Macach. Te nowsze kodeki zapewniają lepszą kompresję danych, a jednocześnie zapewniają tę samą jakość obrazu co starsze formaty wideo.

Ostatnim formatem na naszej liście jest H.264 mp4, który jest obsługiwany przez 92% użytkowników na całym świecie, ale jest to starszy format, który jest zazwyczaj dużo większy niż filmy w formacie WebM lub H.265. Oto przykład różnicy w przypadku 2-minutowego filmu:

Kodek Rozmiar pliku
VP8 5,5 MB
VP9 4,2 MB
H.265 5,4 MB
H.264 16,1 MB

Przesyłanie mniejszych plików to najlepsza optymalizacja skuteczności, jaką możesz zastosować, aby poprawić jakość swoich filmów. Gdy pobierany jest mniejszy film, odtwarzanie rozpoczyna się szybciej, a bufor szybciej się wypełnia. Spowoduje to mniej zacięć podczas odtwarzania filmów. Dodatkowo zmniejszyliśmy obciążenie serwera, co rekompensuje zwiększone wymagania dotyczące miejsca na dysku dla wielu plików wideo.

Atrybut wstępnego ładowania

Odtwarzanie filmów nie rozpocznie się, dopóki nie zostaną pobrane i zapisane na urządzeniu. Za pomocą atrybutu preload możesz kontrolować, ile filmu ma zostać pobrane podczas wczytywania strony. Atrybut wstępnego wczytania może mieć 3 wartości: auto, metadata i none.

preload='auto'

Jeśli użyjesz wartości 'auto', cały film zostanie pobrany niezależnie od tego, czy użytkownik kliknie przycisk odtwarzania. Umożliwia to szybkie odtwarzanie filmu, ponieważ jest on pobierany lokalnie, zanim użytkownik naciśnie przycisk odtwarzania. Z punktu widzenia wykorzystania danych (i obciążenia serwera) należy używać tego tylko wtedy, gdy istnieje duże prawdopodobieństwo, że film zostanie obejrzany. W przeciwnym razie wszystkie dane z pełnego pobrania filmu zostaną zmarnowane.

preload='metadata'

Jest to domyślne ustawienie w Chrome i Safari. Gdy używasz 'metadata', pobierane są pierwsze 3% filmu. Chociaż ta metoda ma te same ograniczenia co 'auto', pobieranie tylko 3% filmu wiąże się z znacznie mniejszym kosztem wykorzystania serwera i danych niż pobieranie całego filmu, a jednocześnie zapewnia, że część filmu jest przechowywana lokalnie, co pozwala na szybkie uruchamianie filmu.

preload='none'

Pozwala to zaoszczędzić najwięcej danych, ale powoduje wolniejsze uruchamianie filmu po naciśnięciu przycisku odtwarzania, ponieważ zgodnie z ustawieniem zero kilobajtów filmu jest wstępnie zapisywane lokalnie na urządzeniu. To odpowiednie ustawienie w przypadku filmów, które są dostępne, ale prawdopodobnie nie będą odtwarzane. Może to być też używane, jeśli użytkownik ma włączony tryb Lite w przeglądarce.

plakat

Możesz ustawić obraz plakatu, który będzie wyświetlany na oknie filmu przed rozpoczęciem odtwarzania:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Film bez obrazu tytułowego wyświetla czarny ekran przed rozpoczęciem.
Brak obrazu plakatu

Film bez obrazu tytułowego wyświetla czarny ekran przed rozpoczęciem.

Film z plakatem jest znacznie bardziej angażujący.
Z obrazem plakatu

Film z plakatem jest znacznie bardziej angażujący.

Dodanie zdjęcia zamiast czarnego pola na stronie sprawi, że Twoja witryna będzie bardziej angażująca i interaktywna. Jednak użycie atrybutu poster powoduje pobranie obrazu przed rozpoczęciem pobierania filmu. Dlatego warto unikać dodawania plakatu w przypadku filmów odtwarzanych automatycznie (ponieważ dodatkowe pobieranie opóźnia pobieranie filmu).

Elementy sterujące odtwarzaniem

Dodanie atrybutu controls powoduje dodanie elementów sterujących odtwarzaniem. Bez nich klienci nie będą mogli uruchomić ani zatrzymać filmu. Dodaj to w przypadku filmów, aby użytkownicy mogli wstrzymywać i odtwarzać filmy, zmieniać głośność itp. W przypadku filmów puszczanych w tle lub w pętli możesz pominąć ten atrybut.

Wyciszono

Atrybut muted powoduje, że odtwarzanie rozpoczyna się w wyciszonym stanie. Jeśli nie zostaną podane żadne elementy sterujące, film będzie odtwarzany bez dźwięku. Jeśli tak jest, warto usunąć ścieżkę audio z filmu. To dodatkowo zmniejsza rozmiar pliku wideo przesyłanego do klienta.

Podobnie jak w przypadku kontenerów i kodeków, usuwanie pliku audio, czyli demultipleksowanie, wykracza poza zakres tego artykułu. Instrukcje znajdziesz w arkuszu 🠡manipulacji mediami.

pętla

Aby przesłać film, który będzie odtwarzany w pętli (jak animowany GIF), dodaj atrybut loop. Ponieważ pliki wideo są zazwyczaj znacznie mniejsze niż animowane GIF-y, ten mechanizm pozwala zastąpić GIF-y plikami wideo.

Automatyczne odtwarzanie filmów

Jeśli chcesz, aby film odtwarzał się natychmiast (np. jako film tła lub film, który odtwarza się w pętli jak animowany GIF), możesz dodać atrybut autoplay:

<video src="myVideo.mp4" playsinline autoplay>

Aby jednak film był odtwarzany automatycznie w przeglądarkach mobilnych, musisz też dodać atrybut muted:

<video src="myVideo.mp4" playsinline autoplay muted>

Podsumowanie

Dodanie filmu do witryny spowoduje, że Twoi klienci będą mogli angażować się w nowy sposób, ale ważne jest, aby treści były dostarczane prawidłowo – zadbaj o to, aby odtwarzanie filmu było płynne i bez przerw. Korzystanie z wbudowanych atrybutów tagu <video> może znacznie ułatwić wyświetlanie bezbłędowych filmów wszystkim użytkownikom odwiedzającym Twoją witrynę.