Filmy video na stronach internetowych

W 2005 YouTube.com zmienił internet na zawsze wprowadzając filmy video jako nowe medium dla wszystkich użytkowników sieci. W 2020 ogromną popularnością zyskał TikTok, który ponownie wydobył potencjał krótkich video jako głównego nośnika przekazu treści w internecie. Video stało się więc nieodłącznym elementem internetu,który możemy również wykorzystać w serwisach internetowych. Jeśli bowiem „obraz mówi więc niż tysiąc słów” to video jeszcze bardziej potęguje przekaz w stronę odbiorcy.

Krótkim filmem video na stronie internetowej jesteśmy w stanie atrakcyjnie zaprezentować całą firmę, produkt lub usługę.

Uprzednio przygotowany film powinien zostać odpowiednio sformatowany i zaimplementowany. Istotnym czynnikiem umieszczania video na stronie www jest jego wielkość. Film nie może być zbyt długi ponieważ transfer zostanie wykorzystany w całości na pobieranie filmu, pomimo, że jest on buforowany. Warto tutaj również pomyśleć o użytkownikach mobilnych, którzy nie zawszę będą w zasięgu szybkiego internetu, a więc korzystanie ze zbyt ciężkiej witryny może odbić się na komforcie odbioru, ale i jako negatywny czynnik w rankingu SEO.

Z technicznego punktu widzenia w celu osadzenia materiałów video na naszej stronie mamy do dyspozycji:

• Wbudowany w przeglądarkę HTML5 video player
• Player YouTube, Vimeo, Facebook, TikTok, Twitter, etc

W przypadku dużych plików, prezentacji, które trwają kilkanaście minut i więcej, lepiej wykorzystać do tego wspomniane serwisy streamingowe, dzięki którym zaoszczędzimy miejsce na serwerze, transfer, a jakość video zostanie automatycznie dostosowana do możliwości transferu końcowego użytkownika.

Dla krótkich prezentacji możemy wykorzystać wbudowany w nowoczesne przeglądarki video player. Dzięki temu mamy pełną kontrolę nad prezentowanym filmem, nie wyświetlamy oznaczeń zewnętrznych serwisów, nie pojawiają się reklamy.

Wbudowany w przeglądarkę player video posiada całą gamę konfiguracji następujące opcje:

• Automatyczne odtwarzanie- autoplay
• Wyciszenie – muted
• Włączenie napisów – track
• Zapętlenie – loop
• Pełny ekran

Wybór formatu filmu

Wybór formatu filmu ma niebagatelne znaczenie gdyż nie wszystkie przeglądarki obsługują klasyczne formaty plików video np. .avi, .mov.

Sprawdźmy zatem na jakie przeglądarki internetowe powinniśmy zwrócić uwagę przy wyborze formatu video.

Z powyższych tabel wynika, że nasz format powinien być wyświetlany we wszystkich powyższych przeglądarkach jeśli chcemy aby film był dostępny dla wszystkich użytkowników.

Silnik przeglądarki	Format video
	.OGG	.MOV	.MP4	.WEBM
BLINK (Chrome, Edge, Opera)	+	+	+	+
GECKO (firefox)	+	+	+	+
WEBKIT (Safari)	+	+	+	–

Jak widać większość aktualnych przeglądarek w pełni wspiera popularne formaty video.

 

Czynnikiem decydującym będzie więc wybór najbardziej optymalnego filmu. Sprawdźmy jak będzie wyglądać dany format pliku video i jaka będzie wielkość pliku.

Format .mov – 3.4MB

Format .mp4 – 3MB

Format .webm – 1.6MB

 

Jak widać na poniższych filmach jakość wszystkich filmów, a oszczędności w rozmiarze pliku są ogromne bo format webm jest o ponad połowę lepszy! Warto zatem postawić na .webm, ale niestety nie zadziała w przeglądarce Safari co powoduje, że powinniśmy zastosować 2 formaty (pierwszy format jest ładowany przed przeglądarkę gdy jest przez nią obsługiwany):

<video width="100%" height="500" controls>
  <source src="https://okinet.pl/wp-content/uploads/2022/03/film-testowy.webm" type="video/webm">
 <source src="https://okinet.pl/wp-content/uploads/2022/03/film-testowy.mp4" type="video/mp4m">
Ten format nie jest obsługiwany w Twojej przeglądarce
</video>

Responsywne video

Dodając plik video lub iframe z youtube nie mamy możliwości ustawienia automatycznego dostosowania szerokości filmu do wielkości przeglądarki. Istnieje jednak trick w CSS, który umożliwi responsywność video.

<style>
.rwd-video{
position:relative;
padding-bottom:56.25%;
padding-top:25px;
height:0;
}

.rwd-video video{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}</style>

Warto jeszcze raz podkreślić, że prezentacja video na stronie internetowym daje dużo mocniejszy i głębszy przekaz wizerunkowy dlatego warto umieszczać video na stronach. Od strony technicznej należy zadbać o to aby filmy były krótkie, te większe powinny być streamowane w serwisach do tego przeznaczonych np. youtube. Nasz film powinien być również zapisany w nowoczesnych formatach video: .webm + .mp4 i umieszczone w responsywnym kontenerze, który zapewni atrakcyjny wygląd video playera na różnych ekranach.