Element <video> w HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Element <video> służy do osadzania filmu bezpośrednio na stronie internetowej. Jest elementem HTML5 i pozwala odtwarzać pliki wideo bez używania dodatkowych wtyczek, np. Flash.

Podstawowa składnia

<video src="film.mp4" controls></video>

Atrybut src wskazuje plik wideo, a controls dodaje panel sterowania, np. przycisk odtwarzania, pauzy i regulację głośności.

Najważniejsze atrybuty elementu video

  • controls — wyświetla kontrolki odtwarzacza,
  • loop — powoduje ciągłe odtwarzanie filmu od początku po zakończeniu,
  • muted — wycisza dźwięk,
  • poster — wskazuje obraz wyświetlany przed uruchomieniem filmu,
  • autoplay — próbuje automatycznie uruchomić film po załadowaniu strony,
  • width i height — określają rozmiar odtwarzacza.

Przykład z ciągłym odtwarzaniem

<video src="reklama.mp4" controls loop></video>

W tym przykładzie film będzie odtwarzany w pętli, ponieważ zastosowano atrybut loop.

Element source

Często zamiast jednego atrybutu src stosuje się elementy <source>, aby podać kilka formatów pliku:

<video controls loop poster="miniatura.jpg">
  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">
  Twoja przeglądarka nie obsługuje wideo HTML5.
</video>

Dzięki temu przeglądarka wybierze pierwszy obsługiwany format.