Filmy video na stronach internetowych

03.03.2022 | Autor: Jakub

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.

Komputery PC
# Styczeń 2022 Udział w rynku
1. Chrome 52.73%
2. Firefox 28.38%
3. Microsoft Edge 9.99%
4. Opera 4.65%
5. Safari 3.55%
Smartfony
# Styczeń 2022 Udział w rynku
1. Chrome Mobile 69.54%
2. Facebook in-app Browser
(domyślna przeglądarka na urządzeniu)
10.95%
3. Safari Mobile 9.90%
4. Samsung Browser
(Chromium project)
7.55%
5. Opera 1.03%

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.

 

Zapoznaj się z pozostałymi wpisami na naszym blogu

Hugo – generator stron statycznych i sklepów.

Hugo – generator stron statycznych i sklepów.

Generator stron statycznych – co to jest? Na początek wyjaśnienie, czym jest generator stron statycznych. Jest to narzędzie, które generuje w pełni statyczny HTML wraz z towarzyszącymi mu skryptami JS i stylami CSS. Generator stron statycznych (SSG – static site generator) ułatwia i automatyzuje przygotowanie poszczególnych podstron strony internetowej. Przykładowo, gdy mamy stronę internetową zawierającą dziesiątki, czy nawet […]

Czytaj więcej
Power of flex

Power of flex

W nowoczesnych stronach internetowych, jednym z najważniejszych elementów jest sam layout strony. Układ elementów w konkretnych miejscach, zależnych względem innych lub niezależnych od siebie. Stosujemy do tego różnego rodzaju rozwiązania, korzystając najczęściej z gotowych bibliotek, zawierających w sobie gotowe układy, wykorzystujące różne techniki. Na początku web designu, strony były tylko zwykłymi dokumentami zawierającymi treści, z czasem dochodziły do tego […]

Czytaj więcej
WP-CLI, z czym to się je?

WP-CLI, z czym to się je?

Czym jest wp-cli? Jak sama nazwa wskazuje jest to command line interface for wordpress, czyli narzędzie konsolowe dedykowane dla wordpressa. Pozwala na wykonywanie różnych czynności administracyjnych z poziomu linii poleceń. To z kolei daje możliwości do automatyzacji. Jak skorzystać z tego rozwiązania? Na początek musimy zadbać o to aby wp-cli zagościł w naszym środowisku deweloperskim.

Czytaj więcej

Porozmawiaj z nami
o swoim projekcie

+48 71 799 88 81
[email protected]

lub napisz