Wykorzystywanie materiałów wideo na stronie internetowej to w obecnych czasach standard. Wideo nie jest niczym egzotycznym zarówno jeśli chodzi o zastosowania czysto dekoracyjne czy jako właściwa treść podstrony z ofertą czy artykułu blogowego.

Filmy wykorzystane w ramach tła nadają stronie czy sklepowi internetowemu dynamizmu i są często bardziej atrakcyjne wizualnie dla przeciętnych odbiorców w porównaniu do strony na której wszystko stoi lub stosuje ona przestarzałe slajdy. Jednak filmy to już nie tylko efekt „wow” – coraz częściej wykorzystuje się je jako właściwą treść strony. Tak jak pisałem w jednym z wydań trendów stron internetowych (w roku 2019), za pomocą wideo umieszczanego w treści da się wytłumaczyć o wiele więcej i o wiele lepiej takie rzeczy jak:

  • procesy i sposoby działania,
  • instrukcje obsługi produktów,
  • prezentacje firmy.

Ciekawe wideo może zastąpić blok tekstu, które chętniej będzie obejrzane dodając stronie nowoczesnego charakteru lub animacje wykonane z wykorzystaniem grafiki wektorowej, której wdrożenie jest często drogie i problematyczne.

W tym artykule poruszymy optymalizację samych plików, aby posiadały dobry stosunek kompresji do jakości, optymalizację wideo pod kątem SEO oraz kilka innych ciekawych zagadnień.

Umieszczanie filmów i klipów wideo na stronie WWW

Choć do problemu filmów na stronach WWW musimy podejść z mniej-więcej taką samą (jak nie większą) starannością jak do zdjęć i grafik, materiały wideo już na samym początku zmuszają nad do podjęcia bardzo zasadniczej decyzji. Otóż, techniki pozwalające umieścić wideo na stronie internetowej musimy podzielić na dwie kategorie. Jedna z nich to techniki bazujące na hostingu-własnym (ang. self-hosted) druga to oczywiście wykorzystanie gotowych serwisów do publikacji wideo.

Własny hosting materiałów wideo

Zalety hostingu-własnego materiałów wideo:

  • kontrola nad formatem i jakością umieszczanego materiału,
  • zachowanie wszelkich praw autorskich i pokrewnych do filmów umieszczonych na stronie,
  • zwiększony autorytet strony w przypadku zdobycia popularności konkretnego pliku,
  • możliwość łatwej edycji treści materiału,
  • dowolność w nadawaniu nazw, metadanych, adresu URI,
  • możliwość decydowania o sposobach dystrybucji,
  • możliwość nakładania ograniczeń i tworzenia własnego sposobu monetyzacji (np. opłata za wyświetlenie),
  • samowystarczalność strony internetowej (niezależność od serwisów zewnętrznych),
  • odtwarzanie filmu generuje ruch na twojej stronie,
  • brak reklam,
  • możliwość kontroli UI odtwarzacza i wprowadzanie własnych jego rozwiązań.

Wady hostingu własnego klipów i filmów wideo:

  • stosunkowo wysoki koszt (zarówno w kwestii rozmiaru na dysku i konsumowanego transferu),
  • konieczność rozwiązania wielu problemów związanych z kompatybilnością i wydajnością na poszczególnych urządzeniach,

Korzystanie z serwisów do publikowania wideo

Zaletą korzystania z serwisów zewnętrznych do hostowania i udostępniania klipów filmowych jest przede wszystkim wygoda i automatyzacja pracy związanej z konwersją na wiele formatów. Korzystanie z YouTube polega tak naprawdę na przesłaniu materiału wideo w dowolnym formacie, a konwersja tego pliku i jego publikacja dzieje się sama. Drugą zaletą może być fakt, że od razu nasz film jako treść pojawia się w wyszukiwarce YouTube, dzięki czemu odsetek użytkowników trafi na niego wprost z niej i zapozna się z naszym materiałem.

Zalety korzystania z zewnętrznych serwisów do publikowania wideo to:

  • automatyczna konwersja wideo do przyjaznych formatów na niemal wszystkie urządzenia,
  • oszczędność zasobów serwerowych (miejsce i transfer),
  • możliwość tworzenia napisów i adnotacji,
  • dywersyfikacja – rozwój kanału w serwisie zewnętrznym.

Zasadniczą wadą takiego rozwiązania jest permanentna utrata pewnych praw (odsyłam do regulaminu) do filmu jaki publikujemy a także brak wzrostu autorytetu jaki naszą strona mogła zyskać dzięki jego publikacji. Treść nie jest publikowana w naszej domenie – znajduje się w serwisie YouTube. Kanał nie jest nasz (może być zamknięty czy to z powodu kwestii prawnych czy polityki samego serwisu lub pomyłki moderatorów).

Umieszczenie później tego wideo na swoim blogu jest tak naprawdę umieszczeniem elementu iframe.

Pamiętajmy, że to wideo nie jest na naszym blogu – to wideo jest w YouTube. Umieszczając klip z YouTube w treści artykułu blogowego my tylko linkujemy do YouTube – co powoduje, że dzięki pewnego rodzaju sztuczce film można obejrzeć nie opuszczając naszej strony. Umieszczanie artykułu blogowego w serwisie zewnętrznym a potem jedynie linkowanie do niego na swoim blogu zaliczylibyśmy do nieracjonalnych praktyk i żaden bloger nigdy by się na to nie zgodził. Tymczasem, większość robi coś takiego z filmami 🙂 Założę się, że wiele osób nigdy o tym nie pomyślało w ten sposób.

W ramach ciekawostki przypomnę, że kiedyś się tak robiło ze zdjęciami – tylko nie używaliśmy tagu iframe a hotlinkowaliśmy do serwisu, który przechowywał zdjęcia.

Opcje umieszczenia wideo na stronie internetowej

Jedną z najprostszych technik umieszczenia wideo na stronie jest użycie tagu video:

<video src="plik.mp4" poster="okladka.jpg" controls>Twoja przeglądarka nie obsługuje odtwarzania filmów HTML5 </video>

Dzięki takiej metodzie pokaże nam się prosty odtwarzacz umożliwiający nie tylko odtworzenie filmu ale także jego pobranie na dysk:

Poniżej opis charakterystycznych atrybutów wykorzystywanych przy uumieszczaniu wideo na stronie internetowej:

  • poster – pozwala wyświetlić niestandardową okładkę,
  • controls – dzięki temu atrybutowi widzimy przyciski umożliwiające łatwe odtworzenie, zapauzowanie i wznowienie odtwarzania a także te odpowiedzialne za pobierania i przełączenie odtwarzania na tryb pełnoekranowy,
  • autoplay – automatyczne odtwarzanie zaraz po rozpoczęciu pobierania się pliku,
    loop – wideo będzie się zapętlać po odtworzeniu,
  • preload – atrybut ten pobiera plik jeszcze zanim użytkownik zdecyduje się go odtworzyć,
  • muted – domyślne wyciszenie dźwięku (wymagane do autoodtwarzania tuż po wejściu na stronę bez dokonywania interakcji ze strony użytkownika),
  • playsinline – atrybut wymagany w Safari do auto-odtwarzania (najlepiej użyć autoplay, muted i playsinline aby automatycznie odtwarzać wideo)

Tag <video> działa podobnie do tagu picture, dlatego możemy umieścić wiele plików źródeł – serwując kilka formatów na raz obsługujemy dużo szersze spektrum przeglądarek:

<video controls>
    <source src="plik.webw"></source> 
    <source src="plik.mp4"></source>
    <source src="plik.ogv"></source>
</video>

Filmy możemy udostępnić w duchu responsive web design i dostarczyć rozmiary odpowiednie dla konkretnego urządzenia. Korzystanie z zapytań medialnych w tym wypadku jest nieporównywalnie bardziej ważniejsze niż przy okazji zdjęć. W tym przypadku oszczędzamy użytkownikom dziesiątki a nawet setki megabajtów.

Wideo w tle strony

Tak naprawdę, przeglądarki nigdy nie wspierały ani nie wspierają użycia pliku wideo w tle elementu HTML (wyłączając gify, webp i cuda w SVG). Każdy sposób umieszczenia klipu wideo w tle strony bazuje na sztuczce polegającej na tym, że ten standardowy odtwarzacz rozmieszczamy w taki sposób aby było wrażenie odtwarzania w tle.

Wykorzystując wspomniane wyżej atrybuty i podstawową wiedzę z kodowania CSS stwórzmy element div, który odtworzy wideo w tle:

HTML: Na początek potrzeba odtwarzacza, który domyślnie będzie odtwarzał i zapętlał wideo. Używamy też atrybutu muted aby przeglądarka Chrome nie zablokowała odtwarzania i nocontrols aby żadnej przeglądarce nie odważyła się wyświetlać kontrolek służących do sterowania odtwarzaniem: 

<div class="container">
   <video src="plik.mp4" autoplay muted loop playsinline nocontrols id="backgroundVideo"></video>
   <div class="content">
      <h1>Jakiś nagłówek</h1>
   </div>
</div>

Całość otoczyliśmy blokiem z atrybutem container, pod video od razu blok do dodawania treści, która będzie widoczna na odtwarzaczu.

CSS: za pomocą arkuszy stylów poszerzamy video na całą szerokość (chociaż w przypadku video bardziej cenna jest zazwyczaj wysokość ale to już zostawiam każdemu do rozważenia):

backgroundVideo{
   width:100%;
   height:auto;
 }

Kontener musi mieć position: relative aby video nie wymuszało tego aby znajdowało się na samej górze strony. Całości nadamy wysokość viewportu, aby nie trzeba było się przejmować dokładnymi wymiarami klipu filmowego:

.container{
   position:relative;
   height:100vh;
}

Treść musi być rozpostarta nad odtwarzaczem:

.content{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background:rgba(255,255,255,0.15);
}

Dodaliśmy jeszcze tło w postaci rgba dzięki czemu możemy dodać maskę dla lepszego uwydatnienia tekstu lub lepszego dopasowania odcienia filmu do reszty strony.

Można też użyć ciekawej biblioteki do tworzenia tła z filmem, w dodatku z opcjonalnym efektem parallax, czytaj więcej w poradniku: efekt parallax na stronie internetowej.

Optymalizacja plików wideo dla stron WWW

Filmy przeznaczone do publikacji na stronie (tak jak zdjęcia) możemy zapisywać w różnych formatach. Tutaj też rozmiar ma znaczenie i pewne inne ustawienia takie jak ilość klatek na sekundę, bitrate i choćby jakość samego audio. Wiedza na ten temat pozwoli trafniej je dobierać do konkretnego zastosowania.

Większość metod kompresji wideo działa tak samo. Klatki kluczowe są czymś w rodzaju pełnego zdjęcia a klatki pośrednie zawierają informacje o przesunięciach i innych transformacjach. to powoduje że za pomocą wideo można efektywniej zapisać wideo niż w przypadku serii pełnych zdjęć. Przekonał się o tym z pewnością każdy kto jeszcze nie tak dawno korzystał z programów do przechwytywania wideo, które zapisują klatki do bitmap.

Formaty wideo obsługiwane przez przeglądarki

MP4

MP4 to tak naprawdę grupa standardów kodowania audio i wideo. MP4 to też następca kodowania MPEG. Jest to obecnie szeroko wspierany format pozwalający osiągnąć zadowalającą jakość obrazu i dźwięku a ustawienia kodeka umożliwiają bardzo oszczędny zapis. Format kontenera MP4 z kodekiem wideo H.264 i kodekiem audio AAC jest natywnie obsługiwany przez wiele przeglądarek w tym Internet Explorer, Safari i Chrome. Internet Explorer i Chrome obsługują również kodek audio MP3 w kontenerze MP4, ale już Safari nie. Firefox obsługuje format w niektórych przypadkach, ale tylko wtedy, gdy dostępny jest dekoder innej firmy, a sprzęt urządzenia może obsłużyć profil używany do kodowania MP4.

Należy też zaznaczyć, że „empeczwórki” zakodowane z wysokim profilem nie będą działać na starszym sprzęcie lub telefonach niższej klasy.

Formaty nośników MPEG są objęte patentami, które nie są licencjonowane bez ograniczeń. Niektóre niezbędne licencje można kupić w MPEG LA. H.264 nie jest obecnie formatem nieodpłatnym, nie nadaje się do otwartej platformy internetowej, według Mozilli, Google i Opery. Jednak formaty nieodpłatne nie są obsługiwane przez Internet Explorera i Safari, dlatego Mozilla i tak zdecydowała się na obsługę tego formatu aby ułatwić deweloperom decyzję co do wykorzystywanego formatu.

Zalety formatu MP4

  • wysoka efektywność kompresji,
  • obecnie szerokie wsparcie i możliwość odtwarzania ściągniętego pliku na wielu urządzeniach,
  • dobry stosunek jakości do kompresji.

Typy MIME dla plików MP4

  • wideo / mp4– plik multimedialny kontenera MP4 zawierający wideo (i ewentualnie również audio),
  • audio / mp4 – Plik multimedialny WebM zawierający tylko dźwięk.

Zapis do tego formatu jest możliwy w większości programów do obróbki wideo. W przypadku braku takiej możliwości zawsze można wykorzystać liczne konwertery choćby dostępne online.

WebM

Format WebM oparty jest na ograniczonej wersji formatu kontenera Matroska. Zawsze wykorzystuje kodek wideo VP8 lub VP9 oraz kodek audio Vorbis lub Opus.

Format WebM to format otwartego standardu, który rozwija Google (tak jak w przypadku zdjęć WebP). W tym momencie temat selekcji odpowiedniego formatu dla stron internetowych mógłby być zakończony a pozostałe zalety kodeka Matroska i formatu WebM to:

  • szybkie przewijanie do wskazanego momentu,
  • duże zdolności do odzyskiwania uszkodzonych danych,
  • bardzo dobry stosunek jakości do kompresji.

Typy MIME dla plików WebM:

  • wideo / webm – plik multimedialny WebM zawierający wideo (i ewentualnie również audio),
  • audio / webm – plik multimedialny WebM zawierający tylko dźwięk.

Ogg Theora Vorbis

Format kontenera Ogg z kodekiem wideo Theora i kodekiem audio Vorbis jest obsługiwany w przeglądarkach: Firefox, Chrome i Opera, a obsługę tego formatu można dodać do Safari (ale niestety nie na iOS), instalując dodatek. Format nie jest w żaden sposób obsługiwany w przeglądarce Internet Explorer 🙂

Wadą formatu Ogg Theora Vorbis jest niestety gorszy stosunek kompresji do jakości i mniejsza kompatybilność – nie jest tak szeroko wspierany jak MP4 i WebM. Bardzo dużą zaletą formatu Ogg jest to, że może jednak służyć do obsługi starszych wersji przeglądarek.

Typy MIME dla plików Ogg:

  • audio / ogg – plik Ogg zawierający tylko dźwięk,
  • wideo / ogg – plik ogg zawierający wideo (i ewentualnie także audio),
  • application / ogg – plik Ogg o nieokreślonej zawartości. Preferowane jest użycie jednego z dwóch pozostałych typów MIME, ale możesz go użyć, jeśli nie wiesz, jaka jest zawartość pliku.

Rozmiar / rozdzielczość

Tak jak w przypadku zdjęć, rozmiar obrazu wideo znacząco wpływa na postrzeganą jakość obrazu i jego rozmiar pliku. Może być ona teoretycznie dowolna, jednak zarówno w technice audio/wideo jak i w przypadku stron internetowych, po upowszechnieniu się stosunku 16:9 znane są cztery często spotykane rozdzielczości:

  • 1080p (1920×1080, zwyczajowo FullHD) – w tej rozdzielczości należy publikować materiały na urządzenia Desktop, które posiadają wiele istotnych szczegółów, takie jak tekst, prezentacje, nagrywanie ekranu.
  • 720p (1280×720, HD lub HD Ready) – w tej rozdzielczości należy publikować filmy na ekrany Desktop i mobilne, gdzie poziom szczegółowości nie jest tak istotny.
  • 480p (720×480 – DVD) – w tej rozdzielczości spokojnie można publikować materiały, które nie zawierają tekstu lub szczegółów, których wyraźne zobaczenie jest kluczowe.
  • 360p (480×360) – format przeznaczony na urządzenia mobilne.
  • 240p (352×240) – format przeznaczony na urządzenia mobilne, gdzie kluczowa jest oszczędność transferu.

Bitrate

Kolejnym tematem jaki trzeba zrozumieć przy publikacji własnego wideo na stronie internetowej jest bitrate. Bitrate pod kątem funkcjonalności przypomina „stopień kompresji” lub jakość jaką ustawia się przy konwersji grafiki na poszczególne formaty graficzne.

W przypadku wideo (a także audio), ostateczny rozmiar pliku jest na tyle istotny, że osobie, która zajmuje się kompresją pozwala się określić jaki rozmiar ma mieć średnio pojedyncza sekunda filmu. Dzięki temu można określić jakość wideo niejako od tyłu, ponieważ z góry wiadomo jaki będzie rozmiar pliku o zadanej długości ale nie wiemy jak wyraźny będzie obraz.

Im większy bitrate, tym większy rozmiar pliku i szansa, że wyjściowy materiał będzie wysokiej jakości. Jednocześnie, zbyt wysoki bitrate zwiększa ryzyko, że po prostu zmarnujemy niepotrzebną przestrzeń a poprawa jakości nie będzie miała znacznego wpływu na subiektywne wrażenia osoby oglądającej wideo.

Im niższy bitrate, tym mniejszy rozmiar pliku i ryzyko tego, że wyjściowy materiał będzie się charakteryzował zbyt małą ostrością i szczegółowością. Jednocześnie, zwiększamy szansę, że zaoszczędzimy wiele miejsca zachowując w miarę dobre wrażenia z oglądania.

Do wykorzystania mamy dodatkowo opcję VBR. W tej opcji chwilowy bitrate dobierany jest do stopnia skomplikowania animacji. To pozwala zaoszczędzić rozmiar zapisu w przerwach prostych kompozycji np. napisów na czarnym tle lub nieruchomego obrazu by zaoszczędzone bity spożytkować na zapis bardziej skomplikowanych i bardziej dynamicznych animacji.

Klatki na sekundę

Ilość klatek na sekundę determinuje wrażenie płynności animacji obrazu w wideo. Wykorzystując fakt, że wiele monitorów i telewizorów nadal pracuje w standardzie 30k/s, większość wideo (jakie można znaleźć w Internecie) serwuje zazwyczaj klatkaż na poziomie ok. 29,97 klatek na sekundę. Od jakiegoś czasu YouTube i P***hub zdecydowali się na wsparcie odświeżania 60 klatek na sekundę – to już jest bardzo dużo i nie ma sensu śrubować tego wyniku jeżeli wideo jest przeznaczone do oglądania w standardowej prędkości.

W ramach ciekawostki przypomnę, że wiele monitorów i prawie wszystkie TV posiadają własny mechanizm pozwalający (kosztem tzw. Input-lagu) na zwiększenie klatek (niejako dodanie dodatkowych), dzięki którym oglądane wideo wydaje się bardziej płynne.

Przechowywanie wideo na serwerze

Temat optymalizacji wideo w kontekście stron internetowych jest bardzo podobny do tej, o której mówimy w przypadku zdjęć i grafik. Jednak filmy mają kilka cech, które zmuszają nas rozważenia kilku dodatkowych problemów.

Serwer plików

Pierwszym z nich będzie ich rozmiar. Stopniowe dodawanie kolejnych klipów powoduje znaczny przyrost wszystkich danych jakie musimy utrzymywać. Z tego powodu warto w pewnym momencie rozważyć przeniesienie zasobów do chmury np. usługi Amazon S3.

CDN

W przypadku rosnącej popularności naszej strony z łatwością podłączymy nasz kubeł do CDN, co pozwoli zredukować kosztu lub zaoszczędzić limity transferu. CDN powoduje także, że treść jest szybciej pobierana za pomocą najbliższych użytkownikowi węzłów. Zmiana hostingu samej strony czy aplikacji nie ma wtedy wpływu na nasz zbiór klipów. Czytaj więcej o CDN.

Pamięć podręczna

Biorąc pod uwagę rozmiar filmów oraz ze często są stosowane na stronie głównej, należy pamiętać o pamięci podręcznej. Dodając kod do .htaccess:

ExpiresByType audio/ogg "access 1 year"
ExpiresByType video/mp4 "access 1 year"
ExpiresByType video/ogg "access 1 year"
ExpiresByType video/webm "access 1 year"

Powodujemy, że przeglądarki będą próbowały przechować w pamięci podręcznej cały plik z filmem. Czytaj więcej o pamięci podręcznej przeglądarki – expires, cache-control.

Optymalizacja SEO filmów wideo

Ba, nawet się to rymuje. Filmy i wideo też możemy optymalizować dla potrzeb SEO. Możemy użyć:

  • semantyczne nazwy plików – które mogą spowodować, że nasz klip będzie się częściej pojawiał w wyszukiwarce filmów i w głównej wyszukiwarce Googole.
  • atrybut title – możemy go użyć tak jak tagów alt przy obrazach (uwaga: używanie tagów alt przy elemencie video jest błędne)
  • minimalizacja rozmiaru – dobre parametry filmu mogą przyczynić się do tego, że nasz film będzie szybciej zwracany w wynikach wyszukiwania a strony je zawierające będą wyżej pozycjonowane,
  • nazwa pliku okładki – czyli poster,
  • zawartość wewnątrz tagu – Tę samą funkcję co alt przy obrazku ma treść umieszczana wewnątrz tagu <video></video>. Zgodnie z graceful degradation tekst się pojawi, jeżeli z jakichś powodów film nie może być odtworzony.
  • mapa strony sitemap.xml – materiały wideo to właśnie przypadek, gdzie użycie map stron dla celów SEO jest właściwe,
  • metadane pliku z filmem – pliki z filmami jak każde pliki posiadają swoje metadane,
  • użycie napisów,
  • transkrypcja całej zawartości w formie tekstowej,
  • stosowanie technik lazy-load – zapobiegających zbyt wczesne ściąganie się wideo i okładek. Czytaj więcej o metodzie lazy-load.

Najczęstsze problemy z filmami na stronie

Załączanie filmów do strony może też powodować problemy. W tej sekcji podpowiadam jak je rozwiązać.

Niedopasowane wielkości filmu – responsywność iframe

Faktycznie, iframe może powodować problemy na stronach responwnych. Ciężko zapanować nad stosunkami szerokości do wysokości kiedy roszerzamy iframe na całą szerokość.

Rozwiązaniem może być takie rozwiązanie, że otaczamy iframe osobnym elementem div:

<div class="iframe-video">
   <iframe src="...>
</div>

A w stylu CSS dodajemy reguły:

.iframe-video{
   position: relative;
   padding-bottom: 56.25%;    /* dla stosunku 16:9 */
   height: 0;
}
.iframe-video iframe {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

Podsumowanie

Jeżeli umieszczamy na stronie wideo, które wcześniej opublikowaliśmy w serwisie YouTube lub Vimeo za pomocą funkcji udostępniania (iframe), większość zagadnień poruszanych w tym artykule w ogóle nas nie dotyczy.

Z drugiej strony, czy nie warto troszkę się wysilić i opublikować własne wideo na własnej stronie i domenie internetowej? Czy nie lepiej opublikować wideo pod własnym URL, który zwiększy autorytet i wartość naszego serwisu w oczach wyszukiwarek? Nie ma na to pytanie jednoznacznej odpowiedzi dlatego refleksję jak zwykle zostawiam Wam.

Źródła

Oceń artykuł na temat: Optymalizacja wideo dla stron internetowych
Średnia : 4.8 , Maksymalnie : 5 , Głosów : 25