Poznaj podstawy wideo. Zwiększenie zaangażowania
Zastanawiasz się nad dodaniem filmu do swojej witryny? Urządzenia i połączenia sieciowe stają się coraz szybsze i bardziej wydajne, dzięki czemu możesz wyjść poza obrazy i dodać filmy do zestawu narzędzi, które pomogą Ci tworzyć sieć. Badania pokazują, że witryny z filmami zwiększają zaangażowanie i sprzedaż. Dlatego nawet jeśli nie masz jeszcze filmów w swoich witrynach, z pewnością minie trochę czasu, zanim to zrobisz.
Najprawdopodobniej pliki wideo dodawane do witryny będą największymi pobieranymi plikami. Dlatego niezwykle ważne jest, aby pliki były tworzone w sposób umożliwiający szybkie i stabilne odtwarzanie dla wszystkich klientów.
Film, który nie jest odtwarzany lub zatrzymuje się podczas odtwarzania, może zwiększyć zaangażowanie i zadowolenie klienta, ale może frustrować klienta.
Koncentruje się on na używaniu tagu HTML5 <video> do wyświetlania reklam wideo. Nie dotyczy to strumieniowych transmisji wideo.
Zaczynajmy!
Tag <video>
Wydaje się to oczywiste, prawda? Aby dodać film, musisz dodać tag <video> i wskazać źródło. Wtedy możesz startować w wyścigach.
<video src="myVideo.mp4">
I masz rację. To wszystko, czego potrzebujesz, aby dodać film do internetu. Jest jednak wiele atrybutów, które możesz dodać do tagu wideo, aby polepszyć jego układ i wyświetlanie.
W tagu <source>
Być może najlepszym sposobem na poprawę wyświetlania filmów w internecie
jest zoptymalizowanie plików dostarczanych 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>
Odnosi się on do 3 osobnych plików źródłowych. Przeglądarka rozpoczyna się od góry i wybiera pierwszy format i kodek, jaki może użyć. W świecie filmów format pliku, nazywany zwykle kontenerem, można zapisać za pomocą różnych kodeków, z których każdy ma odmienne atrybuty. (Więcej informacji na ten temat). W przykładzie powyżej pierwszą opcją jest format WebM (który można zakodować za pomocą kodeków VP8 lub VP9) i jest obsługiwany (w momencie tworzenia tekstu) przez 78% użytkowników na całym świecie. Drugi to kodek H.265 w formacie mp4, który działa na komputerach z iOS i nowszymi komputerami Mac. Te kodeki są nowsze i mają lepszą kompresję danych, a jednocześnie pozwalają odtwarzać filmy w tej samej jakości co w starszych formatach wideo.
Ostatni wybór z naszej listy to H.264 MP4, który obsługuje 92% wszystkich użytkowników na świecie, ale jest to starszy format, więc jest zwykle dużo większy niż filmy WebM czy H.265. W tym przykładzie widać różnicę w dwuminutowym filmie:
| Kodek | Rozmiar pliku |
|---|---|
| VP8 | 5,5 MB |
| VP9 | 4,2 MB |
| H.265 | 5,4 MB |
| H.264 | 16,1 MB |
Najlepszym sposobem optymalizacji wydajności filmów jest przesyłanie mniejszych plików. W przypadku pobrania mniejszego filmu odtwarzanie następuje szybciej, a bufor filmu napełnia się szybciej. Dzięki temu zmniejsza się liczba przerw podczas odtwarzania. Poza tym obciążenie serwera zmniejsza się, co rekompensuje zwiększone zapotrzebowanie na miejsce na dane związane z wieloma plikami wideo.
Atrybut wstępnego wczytywania
Odtwarzanie filmu nie rozpocznie się, dopóki jakiś film nie zostanie pobrany i zapisany lokalnie. Za pomocą atrybutu wstępnego wczytywania możesz kontrolować, ile filmów ma być pobieranych podczas wczytywania strony. Atrybut wstępnego wczytywania ma 3 wartości: auto, metadata i none.
preload='automatyczne'
Jeśli korzystasz z funkcji 'auto', pobrany zostanie cały film, niezależnie od tego, czy użytkownik naciśnie przycisk odtwarzania. Umożliwia to szybkie odtwarzanie filmu, ponieważ jest on pobierany lokalnie, zanim użytkownik rozpocznie odtwarzanie. Z perspektywy użycia danych (i perspektywy obciążenia serwera) należy to stosować tylko wtedy, gdy istnieje duże prawdopodobieństwo, że film będzie oglądany. W przeciwnym razie wszystkie dane
pobrane z filmu zostaną utracone.
wstępne wczytywanie='metadane'
Jest to domyślne ustawienie wstępnego wczytywania przeglądarek Chrome i Safari. Jeśli używasz 'metadata', pobierane są pierwsze 3% filmu. Mimo że 'auto' ma pewne ograniczenia, pobranie tylko 3% filmu wiąże się ze znacznie mniejszym kosztem wykorzystania serwera/danych niż cały film, a jednocześnie daje pewność, że jego część będzie przechowywana lokalnie na potrzeby szybkiego uruchamiania filmu.
preload='brak'
Pozwala to zaoszczędzić najwięcej danych, ale powoduje wolniejsze uruchamianie filmu po jego naciśnięciu, ponieważ zgodnie z ustawieniami ustawienie 0 kilobajtów filmu jest wstępnie wczytywane lokalnie na urządzenie. Jest to odpowiednie ustawienie w przypadku filmów, które są dostępne, ale raczej 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 ustawić plakat, który będzie wyświetlać się nad oknem wideo przed rozpoczęciem odtwarzania filmu:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Przed rozpoczęciem filmu bez plakatu wyświetlany jest czarny ekran.
Film z plakatem jest znacznie ciekawszy.
Dodając zdjęcie zamiast czarnego pola na stronie, sprawisz, że Twoja witryna stanie się bardziej atrakcyjna i interaktywna. Użycie atrybutu poster powoduje jednak dodanie obrazu przed rozpoczęciem pobierania. Dlatego warto unikać umieszczania plakatu przy filmach, które są odtwarzane automatycznie (dodatkowe pobieranie opóźnia pobieranie filmu).
Sterowanie odtwarzaniem
Dodanie atrybutu controls dodaje elementy sterujące odtwarzaniem. Bez nich klienci nie będą mogli włączyć ani zatrzymać filmu. Dodaj go, aby użytkownicy mogli
zatrzymywać i wstrzymywać odtwarzanie, zmieniać głośność itd. W przypadku filmów w tle lub w pętli możesz pominąć ten atrybut.
Wyciszono
Atrybut muted powoduje rozpoczęcie odtwarzania z wyciszonym dźwiękiem. Jeśli nie dodasz żadnych elementów sterujących, element pozostanie wyciszony do końca odtwarzania. Jeśli tak, warto
usunąć ścieżkę dźwiękową z filmu. To jeszcze bardziej zmniejsza rozmiar pliku wideo dostarczanego do klienta.
Tak jak w przypadku kontenerów i kodeków, również ten artykuł wykracza poza zakres usunięcia pliku audio, tzw. demuxingu. Instrukcje znajdziesz w ściągawce dotyczącej manipulacji multimediami.
pętla
Aby wyświetlić film w pętli (np. animowany GIF), dodaj atrybut loop. Pliki wideo są zwykle znacznie mniejsze niż animowane GIF-y, dlatego ten mechanizm umożliwia zastępowanie GIF-ów plikami wideo.
Film odtwarzany automatycznie
Jeśli chcesz, aby film włączył się natychmiast (np. jako film w tle lub odtwarzany w pętli jak animowany GIF), możesz dodać atrybut autoplay:
<video src="myVideo.mp4" autoplay>
Jednak aby film automatycznie odtwarzał się w przeglądarkach mobilnych, musisz też dodać atrybut muted:
<video src="myVideo.mp4" autoplay muted>
Podsumowanie
Samo dodanie filmu do strony zwiększy zaangażowanie klientów. Ważne jest jednak przesłanie odpowiednich treści, aby odtwarzanie filmu było płynne i bez przestojów. Zastosowanie wbudowanych atrybutów tagu <video> może znacznie ułatwiać wyświetlanie bezproblemowego filmu wszystkim odwiedzającym Twoją witrynę.