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

Poznaj podstawy tworzenia filmów. Zwiększenie zaangażowania.

Doug Sillars

Czy rozważasz dodanie filmu do swojej witryny? Wraz z tym, jak urządzenia i połączenia sieciowe stają się coraz szybsze i mocniejsze, możesz zacząć tworzyć strony internetowe nie tylko z użyciem obrazów, ale też filmów. Badania wykazują, ż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.

Najprawdopodobniej pliki wideo, które dodasz do witryny, będą największymi pobieranymi plikami. Dlatego tak ważne jest, aby pliki były tworzone z myślą o szybkim i stabilnym odtwarzaniu przez wszystkich klientów. Mimo że film może zwiększyć zaangażowanie i zadowolenie klienta, jeśli się nie odtwarza lub nie zacina się podczas odtwarzania, może to być frustrujące. W tym artykule skupiamy się na korzystaniu z tagu HTML5 <video> do dostarczania 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 gotowe.

<video src="myVideo.mp4">

I masz rację. Na najwyższym poziomie – to wszystko, czego potrzeba, aby dodać film do internetu. 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 i kodek, którego może używać. 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 pierwszy wybór to format WebM (który można zakodować za pomocą kodeków VP8 lub VP9). Jest on obsługiwany (w momencie pisania) 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:

Przesyłanie mniejszych plików to najlepsza optymalizacja skuteczności, jaką możesz wykonać, 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 zmniejsza się 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 wstępnego wczytania możesz kontrolować, ile filmu ma zostać pobranych po załadowaniu strony. Atrybut wstępnego wczytywania ma 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ć tej opcji tylko wtedy, gdy jest wysoce prawdopodobne, że film zostanie obejrzony. W przeciwnym razie wszystkie dane, które można pobrać w całości, zostaną utracone.

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='brak'

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. Tej opcji można też użyć, jeśli użytkownik włączył w przeglądarce wersję uproszczoną.

plakat

Możesz potrzebować obrazu plakatu, który będzie wyświetlany nad oknem wideo przed rozpoczęciem odtwarzania filmu:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

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 filmów 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. Zmniejszy to 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 zapętlony (np. 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>

Jednak aby film był automatycznie odtwarzany w przeglądarkach mobilnych, musisz 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 – upewnij się, że odtwarzanie filmu jest płynne i bez przerw. Wykorzystanie wbudowanych atrybutów tagu <video> znacznie ułatwia wyświetlanie niezakłóconych filmów wszystkim użytkownikom witryny.