INF.03. Publikacja Wideo w HTML5

I. Responsywność Wideo (CSS)

Wideo musi skalować się poprawnie na urządzeniach mobilnych, zachowując proporcje (np. 16:9). Samo ustawienie width: 100% nie wystarczy, ponieważ wysokość się nie dostosuje, co może zniekształcić wideo.

Metoda "Aspect Ratio Box"

Używamy elementu kontenerowego i właściwości padding-top, która przyjmuje wartość procentową w stosunku do szerokości. Typowe proporcje wideo:

16:9: $(9 / 16) \times 100\% \approx 56.25\%$
4:3: $(3 / 4) \times 100\% = 75\%$

Kod CSS i HTML (16:9)

                    <style>

                    .video-container {

                        position: relative;

                        width: 100%;

                        padding-top: 56.25%; /* Proporcja 16:9 */

                    }

                    .video-container video {

                        position: absolute;

                        top: 0;

                        left: 0;

                        width: 100%;

                        height: 100%;

                    }

                    </style>

                    <!-- HTML -->

                    <div class="video-container">

                        <video controls>...</video>

                    </div>

II. Optymalizacja Ładowania Zasobów

Wideo to duży zasób. Musimy kontrolować, kiedy przeglądarka zacznie je ładować, aby nie spowolnić reszty strony.

Atrybut preload

Określa, ile danych wideo ma być załadowane przed rozpoczęciem odtwarzania przez użytkownika.

preload="none": Wideo nie jest ładowane w ogóle (zalecane, jeśli wideo nie jest na górze strony).
preload="metadata": Ładowane są tylko metadane (wymiary, czas trwania, pierwszy bajt — wystarcza do wyświetlenia plakatu/kontrolki). Najczęstsze i zoptymalizowane użycie.
preload="auto": Całe wideo jest ładowane automatycznie (używać tylko, gdy wideo jest kluczowe).

                    <video controls poster="okladka.jpg" preload="metadata">

                        ... <source> ...

                    </video>

Lazy Loading Wideo

Aby jeszcze bardziej opóźnić ładowanie wideo poza widocznym obszarem strony (viewport), można użyć JavaScript, który wstawi kod <video> dopiero, gdy użytkownik przewinie stronę do tego miejsca.

III. Dostępność (Accessibility) - Tag <track>

Ważnym elementem wideo są napisy, które zwiększają dostępność (dla osób głuchych) oraz użyteczność (wideo odtwarzane bez dźwięku). Używamy do tego tagu <track>.

kind="captions": Napisy dla dialogów (dla osób niesłyszących).
kind="subtitles": Tłumaczenie dialogów na inny język.
srclang, label: Określa język i nazwę ścieżki (wyświetlane w menu odtwarzacza).
src: Wskazuje plik z napisami w formacie VTT (.vtt) (Web Video Text Tracks).

Kod HTML z napisami

                    <video controls>

                        <source src="moj_film.mp4" type="video/mp4">

                        <track kind="captions" src="napisy_pl.vtt" srclang="pl" label="Polskie napisy" default>

                        <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English subtitles">

                    </video>

IV. Kontrola Wideo za Pomocą JavaScript

Aby stworzyć niestandardowy interfejs sterowania lub kontrolować wideo w reakcji na akcje użytkownika (np. kliknięcie przycisku poza odtwarzaczem), używamy JavaScript i metod obiektu HTMLMediaElement.

Kluczowe Metody JavaScript

element.play(): Rozpoczyna odtwarzanie.
element.pause(): Zatrzymuje odtwarzanie.
element.load(): Ponownie ładuje wideo.
element.currentTime: Pozwala odczytać/ustawić aktualną pozycję odtwarzania (w sekundach).
element.volume: Ustawia głośność (wartość od 0.0 do 1.0).

Przykład JS: Zewnętrzny Przycisk Play/Pause

                    <!-- HTML -->

                    <video id="mojeWideo" controls>...</video>

                    <button onclick="togglePlayPause()">Play / Pause</button>

                    <script>

                    function togglePlayPause() {

                        var wideo = document.getElementById('mojeWideo');

                        if (wideo.paused) {

                            wideo.play();

                        } else {

                            wideo.pause();

                        }

                    }

                    </script>

Ćwiczenie Zadania Praktyczne

Zadanie 1: Wideo Responsywne i Optymalizacja

Zaimplementuj kod HTML i CSS z sekcji I, aby stworzyć kontener wideo z proporcjami 4:3 (75%).
Do tagu <video> dodaj atrybut preload="metadata" oraz poster (miniatura).

Zadanie 2: Kontrola JS i Dostępność

Dodaj do wideo tag <track> dla polskich napisów (zaślepka src="napisy.vtt").
Zaimplementuj mechanizm JavaScript z sekcji IV, tworząc zewnętrzny przycisk, który wycisza (element.volume = 0) wideo.