Kurs HTML

Zwiększanie dostępności i zasięgu multimediów

Osadzenie audio i wideo to dopiero początek. Aby treści multimedialne były dostępne i zrozumiałe dla jak najszerszego grona odbiorców, w tym osób niesłyszących, niedosłyszących, niewidomych, niedowidzących, a także osób oglądających w hałaśliwym otoczeniu lub uczących się języka, potrzebujemy mechanizmu dodawania ścieżek tekstowych. Do tego właśnie służy znacznik <track>.

Element <track>

Znacznik <track> jest używany jako dziecko elementu <audio> lub <video> i pozwala na określenie zewnętrznych, zsynchronizowanych czasowo ścieżek tekstowych.

• Jest to element pusty (nie ma znacznika zamykającego).
• Wymaga kilku kluczowych atrybutów do poprawnego działania.

Atrybuty znacznika <track>

• kind: Określa rodzaj ścieżki tekstowej. Najważniejsze wartości:
  • subtitles: Napisy dla osób słyszących, ale nie rozumiejących języka audio (tłumaczenie dialogów).
  • captions: Napisy dla osób niesłyszących lub niedosłyszących. Obejmują nie tylko dialogi, ale także opisy ważnych dźwięków (np. [muzyka], [śmiech], [dzwonek telefonu]).
  • descriptions: Audiodeskrypcja - tekstowy opis scen wizualnych dla osób niewidomych lub niedowidzących (odczytywany przez syntezator mowy lub używany przez inne technologie).
  • chapters: Tytuły rozdziałów, używane do nawigacji wewnątrz multimediów.
  • metadata: Dane przeznaczone do przetwarzania przez skrypty, niewidoczne dla użytkownika.
• src (wymagany): Wskazuje adres URL pliku zawierającego ścieżkę tekstową. Najczęściej używanym formatem jest WebVTT (.vtt).
• srclang (wymagany dla kind="subtitles"): Określa język ścieżki tekstowej za pomocą standardowego kodu języka (np. pl dla polskiego, en dla angielskiego, de dla niemieckiego).
• label (wymagany): Tekstowa etykieta ścieżki, która będzie widoczna dla użytkownika w interfejsie przeglądarki (np. w menu wyboru napisów). Powinna być czytelna i jednoznacznie identyfikować ścieżkę (np. "Polskie napisy", "English subtitles", "Audiodeskrypcja").
• default: Atrybut logiczny. Jeśli jest obecny, dana ścieżka (np. napisy) powinna być domyślnie włączona, jeśli preferencje użytkownika nie wskazują inaczej. W danej grupie ścieżek tego samego rodzaju (np. kilka wersji napisów) tylko jedna może mieć atrybut default.

Format WebVTT (.vtt)

WebVTT (Web Video Text Tracks) to standardowy format plików tekstowych używany przez znacznik <track>. Jest stosunkowo prosty i czytelny.

Podstawowa struktura pliku .vtt:

WEBVTT

00:00:01.000 --> 00:00:05.000
To jest pierwszy napis, który pojawi się między 1 a 5 sekundą.

00:00:06.500 --> 00:00:10.000
A to jest drugi napis.
Może on zawierać wiele linii.

CHAPTER
00:01:00.000 --> 00:05:00.000
Rozdział 1: Wprowadzenie

NOTE To jest komentarz, ignorowany przez parser

00:00:12.000 --> 00:00:15.000 align:start line:0%
[Muzyka w tle]
Ten napis (caption) opisuje dźwięk i jest wyrównany do lewej górnej krawędzi.Kopiuj

• Plik musi zaczynać się od linii WEBVTT.
• Poszczególne wpisy (cue) są oddzielone pustymi liniami.
• Każdy wpis zawiera znacznik czasu początku i końca (hh:mm:ss.ttt --> hh:mm:ss.ttt).
• Poniżej znacznika czasu znajduje się tekst napisu/opisu.
• Można dodawać opcjonalne ustawienia (np. align, line) oraz komentarze (NOTE).
• Wpisy dla rozdziałów (kind="chapters") mogą być oznaczone słowem kluczowym CHAPTER.

Przykład użycia <track> w <video>

<video controls width="640" height="360" poster="film.jpg" preload="metadata">
  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">
  
  <!-- Napisy w różnych językach -->
  <track kind="subtitles" src="napisy_pl.vtt" srclang="pl" label="Polski" default>
  <track kind="subtitles" src="napisy_en.vtt" srclang="en" label="English">
  
  <!-- Napisy dla niesłyszących (Captions) -->
  <track kind="captions" src="captions_pl.vtt" srclang="pl" label="Polski [CC]">
  
  <!-- Audiodeskrypcja -->
  <track kind="descriptions" src="opis_pl.vtt" srclang="pl" label="Audiodeskrypcja (PL)">
  
  <!-- Rozdziały -->
  <track kind="chapters" src="rozdzialy.vtt" srclang="pl" label="Rozdziały">
  
  <!-- Tekst zastępczy -->
  Twoja przeglądarka nie obsługuje wideo HTML5 lub formatu WebVTT.
</video>Kopiuj

W tym przykładzie dodaliśmy:

• Dwa zestawy napisów (polski - domyślny, i angielski).
• Polskie napisy dla niesłyszących (captions).
• Polską audiodeskrypcję.
• Polskie nazwy rozdziałów.

Przeglądarka, która obsługuje <track>, zazwyczaj wyświetli w kontrolkach odtwarzacza menu pozwalające użytkownikowi wybrać, które ścieżki tekstowe chce włączyć.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Do odtwarzacza wideo z poprzedniej lekcji dodaj polskie napisy. Utwórz prosty plik napisy_testowe.vtt z co najmniej dwoma wpisami. Użyj znacznika <track> z odpowiednimi atrybutami (kind="subtitles", src, srclang="pl", label="Polski"). Możesz dodać atrybut default.

Krok 1: Utwórz plik `napisy_testowe.vtt` (zapisz go w tym samym katalogu co plik HTML lub w podkatalogu, np. `tracks`)

WEBVTT

00:00:02.000 --> 00:00:05.000
Witaj w naszym wideo testowym!

00:00:06.000 --> 00:00:09.500
To jest przykład dodawania napisów za pomocą WebVTT.Kopiuj

Krok 2: Zmodyfikuj kod HTML odtwarzacza wideo

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wideo z Napisami</title>
    <style>
        video {
            display: block;
            margin: 20px auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<h1>Wideo testowe z napisami</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">
  
  <!-- Dodane napisy -->
  <track kind="subtitles" src="napisy_testowe.vtt" srclang="pl" label="Polski" default>
  
  <p>
    Twoja przeglądarka nie obsługuje odtwarzania wideo HTML5 lub formatu WebVTT. 
    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

Po otwarciu tego pliku HTML w przeglądarce, w kontrolkach odtwarzacza powinna pojawić się opcja włączenia/wyłączenia polskich napisów (mogą być domyślnie włączone ze względu na atrybut default). Tekst z pliku .vtt będzie się pojawiał w odpowiednich momentach filmu.