Kurs HTML

Dodawanie filmów do strony

Znacznik <video> jest kluczowym elementem HTML5 umożliwiającym osadzanie i odtwarzanie treści wideo bezpośrednio na stronie internetowej, bez potrzeby używania zewnętrznych wtyczek. Pozwala na umieszczanie filmów, animacji, prezentacji wideo i innych materiałów wizualnych.

Podstawowe użycie z atrybutem `src`

Podobnie jak w przypadku <audio>, najprostszym sposobem jest użycie atrybutu src do wskazania pliku wideo oraz controls do wyświetlenia kontrolek. Dodatkowo, dla wideo często określa się wymiary za pomocą atrybutów width i height.

<video controls width="640" height="360" src="moj-film.mp4">
  Twoja przeglądarka nie obsługuje elementu video.
</video>Kopiuj

Ważne atrybuty znacznika <video>

Znacznik <video> dzieli wiele atrybutów z <audio>, ale ma też kilka specyficznych dla siebie:

• controls: Atrybut logiczny, włącza domyślne kontrolki odtwarzacza (play/pauza, głośność, pasek postępu, pełny ekran).
• width, height: Określają wymiary odtwarzacza w pikselach. Ważne jest, aby zachować proporcje (aspect ratio) oryginalnego wideo, aby uniknąć zniekształceń.
• poster: Wskazuje URL obrazka, który ma być wyświetlany jako "plakat" lub miniatura wideo, zanim użytkownik rozpocznie odtwarzanie lub podczas ładowania wideo. To poprawia wygląd strony, zamiast pokazywania czarnego prostokąta lub pierwszej klatki filmu.

  <video controls width="640" height="360" poster="miniaturka-filmu.jpg" src="moj-film.mp4">...</video>Kopiuj

• autoplay: Atrybut logiczny. Próbuje automatycznie rozpocząć odtwarzanie. Uwaga: Większość przeglądarek blokuje autoplay z dźwiękiem. Zazwyczaj działa tylko w połączeniu z atrybutem muted.
• loop: Atrybut logiczny. Powoduje odtwarzanie wideo w pętli.
• muted: Atrybut logiczny. Domyślnie wycisza dźwięk wideo. Często wymagany, aby autoplay zadziałał.
• preload: Podobnie jak w <audio>, sugeruje przeglądarce, jak ładować plik wideo: none, metadata (domyślna dla video), auto. Ze względu na potencjalnie duże rozmiary plików wideo, przeglądarki często domyślnie ustawiają preload="metadata".
• playsinline: Atrybut logiczny, ważny głównie na urządzeniach mobilnych (szczególnie iOS). Pozwala na odtwarzanie wideo bezpośrednio w miejscu osadzenia na stronie, zamiast automatycznego przełączania na tryb pełnoekranowy.

Przykład z atrybutami `poster`, `autoplay` (wyciszony) i `loop`:

<!-- Krótka, zapętlona animacja w tle, bez dźwięku -->
<video autoplay loop muted playsinline width="300" height="200" poster="animacja-poster.jpg">
  <source src="krotka-animacja.webm" type="video/webm">
  <source src="krotka-animacja.mp4" type="video/mp4">
  Twoja przeglądarka nie obsługuje wideo.
</video>Kopiuj

Dostarczanie wielu formatów: element <source>

Podobnie jak w przypadku audio, użycie elementu <source> jest zalecane do zapewnienia kompatybilności wideo. Pozwala to podać ten sam film w różnych formatach (kontenerach i kodekach).

• Atrybut src w <source>: Ścieżka do pliku wideo.
• Atrybut type w <source>: Typ MIME pliku wideo, często zawierający informację o kodekach.

Popularne formaty wideo i ich typy MIME:

• MP4 (z kodekiem wideo H.264 i audio AAC): video/mp4 lub video/mp4; codecs="avc1.42E01E, mp4a.40.2" (bardziej precyzyjnie)
• WebM (z kodekiem wideo VP8/VP9 i audio Vorbis/Opus): video/webm lub video/webm; codecs="vp8, vorbis"
• Ogg Theora Vorbis: video/ogg lub video/ogg; codecs="theora, vorbis"

Format MP4 (H.264/AAC) jest obecnie najszerzej wspierany. Format WebM jest również dobrze wspierany i jest formatem otwartym, często preferowanym ze względów licencyjnych.

Przykład użycia <source> z formatami MP4 i WebM:

<video controls width="720" height="405" poster="film-plakat.jpg" preload="metadata">
  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">
  <!-- Tekst zastępczy dla starszych przeglądarek -->
  Niestety, Twoja przeglądarka nie obsługuje odtwarzania wideo. 
  Możesz <a href="film.mp4">pobrać film w formacie MP4</a>.
</video>Kopiuj

Przeglądarka spróbuje odtworzyć film.mp4. Jeśli nie może, spróbuje film.webm. Jeśli oba formaty zawiodą, wyświetli tekst zastępczy.

Dostępność wideo

Aby treści wideo były dostępne dla szerszego grona odbiorców, należy rozważyć:

• Napisy (Subtitles/Captions): Dla osób niesłyszących, niedosłyszących lub oglądających wideo bez dźwięku. Dodaje się je za pomocą znacznika <track> (omówionego w następnej lekcji).
• Audiodeskrypcję: Dodatkową ścieżkę dźwiękową opisującą elementy wizualne dla osób niewidomych lub niedowidzących (również za pomocą <track>).
• Transkrypcję tekstową: Pełny tekst dialogów i ważnych dźwięków.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Osadź na stronie odtwarzacz wideo o wymiarach 480x270 pikseli z kontrolkami. Użyj atrybutu poster, aby ustawić obrazek migawka.jpg jako miniaturę. Za pomocą <source> podaj dwa formaty wideo: wideo-testowe.mp4 (typ video/mp4) i wideo-testowe.webm (typ video/webm). Dodaj tekst zastępczy.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Odtwarzacz Wideo</title>
    <style>
        video {
            display: block; /* Aby uniknąć dodatkowego miejsca pod wideo */
            margin: 20px auto; /* Wyśrodkowanie */
            border: 1px solid #ccc;
        }
        .fallback-text {
            text-align: center;
            color: #777;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<h1>Obejrzyj nasze wideo testowe</h1>

<video controls width="480" height="270" poster="migawka.jpg" preload="metadata">
  <source src="wideo-testowe.mp4" type="video/mp4">
  <source src="wideo-testowe.webm" type="video/webm">
  <p class="fallback-text">
    Twoja przeglądarka nie obsługuje odtwarzania wideo HTML5. 
    Możesz pobrać plik: 
    <a href="wideo-testowe.mp4" download>Pobierz MP4</a> lub 
    <a href="wideo-testowe.webm" download>Pobierz WebM</a>.
  </p>
</video>

</body>
</html>Kopiuj