Jak osadzać wideo z tagiem <video>

2.1.1: Jak osadzać wideo z tagiem <video>

Wideo to jeden z najpotężniejszych sposobów przekazywania informacji w internecie. Od tutoriali, przez prezentacje produktów, po trailery filmowe – możliwości są niemal nieograniczone. Dzięki HTML5, możemy osadzać wideo bez użycia Flasha czy innych zewnętrznych dodatków. Wystarczy zrozumieć, jak działa znacznik <video>.

Podstawowa składnia znacznika <video>

Najprostszy sposób osadzenia wideo wygląda tak:

<video src="film.mp4" controls>
  Twoja przeglądarka nie obsługuje wideo HTML5.
</video>

Efekt działania:

(Pojawi się odtwarzacz wideo z plikiem „film.mp4”, jeśli taki plik faktycznie istnieje w katalogu.)

Omówienie atrybutów

Zacznijmy od kluczowych atrybutów, które możesz wykorzystać z tagiem <video>:

• controls – dodaje przyciski sterujące (play, pauza, głośność itp.),
• autoplay – uruchamia wideo automatycznie (może wymagać wyciszenia),
• loop – zapętla wideo,
• muted – domyślnie wycisza wideo (często wymagane przy autoplay),
• poster – miniatura widoczna przed odtworzeniem,
• width i height – definiują wymiary odtwarzacza.

Przykład z dodatkowymi atrybutami

<video src="film.mp4" controls autoplay muted loop poster="miniatura.jpg" width="640" height="360">
  Twoja przeglądarka nie obsługuje wideo HTML5.
</video>

Efekt działania:

(Wideo automatycznie się odtworzy, będzie zapętlone i wyciszone. Przed startem pokaże się miniatura „miniatura.jpg”.)

Użycie wielu formatów – dla lepszej kompatybilności

Różne przeglądarki obsługują różne formaty wideo. Najczęściej używane to:

• .mp4 (format H.264) – obsługiwany praktycznie wszędzie,
• .webm – popularny w przeglądarkach opartych o Chromium,
• .ogg – format otwarty, ale mniej powszechny.

Dlatego zaleca się dodanie kilku źródeł w znaczniku <video>:

<video controls width="640" height="360">
  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">
  <source src="film.ogg" type="video/ogg">
  Twoja przeglądarka nie obsługuje wideo HTML5.
</video>

Efekt działania:

(Przeglądarka wybierze pierwszy wspierany format z listy.)

Osadzanie z lokalnego pliku a z zewnętrznego źródła

Możesz osadzić plik z własnego serwera, jak pokazano powyżej, lub wykorzystać zewnętrzne źródła – choć np. YouTube i Vimeo mają inne mechanizmy (o tym później). Dla pliku zewnętrznego:

<video controls width="640" height="360">
  <source src="https://example.com/media/film.mp4" type="video/mp4">
  Twoja przeglądarka nie obsługuje wideo HTML5.
</video>

Uwaga: Niektóre serwery blokują odtwarzanie filmów przez inne domeny (CORS).

Jak zadbać o responsywność odtwarzacza?

Domyślnie tag <video> ma stałe wymiary. Aby dostosować go do szerokości urządzenia (np. telefonu), można użyć CSS:

<style>
  video {
    max-width: 100%;
    height: auto;
  }
</style>
<video controls src="film.mp4"></video>

Efekt działania:

(Odtwarzacz dostosowuje się do szerokości rodzica – np. do szerokości ekranu smartfona.)

Ćwiczenie: Stwórz własny odtwarzacz w JSFiddle

Spróbuj samodzielnie osadzić wideo z lokalnego pliku (lub publicznego linku do .mp4), używając różnych atrybutów: autoplay, muted, loop, poster. Skorzystaj z tego szablonu w JSFiddle:

👉 Otwórz JSFiddle i stwórz nowy fiddle

Wklej poniższy kod do sekcji HTML:

<video controls autoplay muted loop poster="https://via.placeholder.com/640x360?text=Miniatura" width="640" height="360">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Twoja przeglądarka nie obsługuje wideo HTML5.
</video>

Możesz eksperymentować, zmieniając atrybuty i dodając inne pliki lub style CSS!