PricingLoginStart free
HTML Academy · Lekcja

Napisy za pomocą track i WebVTT

Dodawanie podpisów i napisów do wideo za pomocą track i plików .vtt

Lekcja 4 z 414 kroki

Napisy za pomocą track i WebVTT to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Napisy i napisy dla niesłyszących

Dostępność wideo wymaga tekstowych odpowiedników treści audio:

  • Napisy — transkrypcja dialogów, zakładająca, że odbiorca słyszy dźwięki
  • Napisy dla niesłyszących — dialogi oraz opisy dźwięków (dla osób niesłyszących)
  • Audiodeskrypcja — opisuje treści wizualne dla osób niewidomych

Element track

Element <track> dołącza plik z napisami lub napisami dla niesłyszących do wideo:

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track
    src="tutorial-en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  >
  <track
    src="tutorial-es.vtt"
    kind="subtitles"
    srclang="es"
    label="Spanish"
  >
</video>

Atrybuty elementu track

Atrybuty elementu track:

  • src — ścieżka do pliku VTT
  • kind — typ ścieżki (napisy, napisy dla niesłyszących, audiodeskrypcja, rozdziały, metadane)
  • srclang — kod języka BCP 47 (en, es, fr...)
  • label — zrozumiała dla człowieka nazwa wyświetlana w menu CC
  • default — wartość logiczna; ta ścieżka jest wyświetlana domyślnie

Format WebVTT

WebVTT (Web Video Text Tracks) to format plików z napisami:

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

Identyfikatory cue VTT

Cue VTT mogą mieć opcjonalne identyfikatory:

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

Ustawienia cue VTT

Cue VTT obsługują ustawienia pozycjonowania:

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

Stylowanie cue WebVTT za pomocą CSS

Pola cue można stylować za pomocą pseudoelementu ::cue:

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

Wartości kind elementu track

Atrybut kind określa przeznaczenie ścieżki tekstowej:

  • subtitles — tłumaczenie lub transkrypcja dialogów
  • captions — dialogi i opisy dźwięków dla osób niesłyszących
  • descriptions — audiodeskrypcja treści wizualnych dla osób niewidomych
  • chapters — tytuły rozdziałów ułatwiające nawigację
  • metadata — dane czytelne maszynowo przeznaczone dla JavaScriptu

Ścieżka rozdziałów

W celu zapewnienia nawigacji po rozdziałach wideo należy użyć kind=chapters:

<track
  kind="chapters"
  src="chapters.vtt"
  srclang="en"
  label="Chapters"
>

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

Interfejs JavaScript TextTrack API

Dostęp do danych ścieżki można uzyskać za pomocą TextTrack API:

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

Ścieżka metadanych dla interaktywnego wideo

Ścieżek metadanych należy używać do wyzwalania zdarzeń JavaScriptu w określonych momentach:

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

Wymagania dotyczące dostępności

WCAG wymaga napisów do nagranych wcześniej materiałów wideo:

  • Poziom A — napisy do wszystkich nagranych wcześniej materiałów wideo zawierających dźwięk
  • Poziom AA — audiodeskrypcja do wszystkich nagranych wcześniej materiałów wideo
  • Napisy generowane automatycznie (np. przez YouTube) są niewystarczające bez weryfikacji
  • Napisy muszą być dokładne, zsynchronizowane i kompletne

Szybki test

Czym różnią się rodzaje ścieżek subtitles i captions?

Odpowiedz w interaktywnej lekcji

Podsumowanie: track i WebVTT

Najważniejsze informacje o napisach i napisach dla niesłyszących:

  • <track src kind srclang label default> wewnątrz video
  • kind: subtitles, captions, descriptions, chapters, metadata
  • Format pliku WebVTT: WEBVTT + timestamp --> timestamp + text
  • Cue można stylować za pomocą pseudoelementu CSS ::cue
  • WCAG wymaga napisów do nagranych wcześniej materiałów wideo
Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
40
Lekcje
159
Zacznij naukę bezpłatnieWyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Napisy za pomocą track i WebVTT” jest bezpłatna?

Tak — pełny tekst „Napisy za pomocą track i WebVTT” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Napisy za pomocą track i WebVTT”?

Dodawanie podpisów i napisów do wideo za pomocą track i plików .vtt Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Napisy za pomocą track i WebVTT”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Element audio — src, controls, loop i autoplay
  2. Element video i współczynnik proporcji
  3. Element source dla wielu formatów
  4. Napisy za pomocą track i WebVTT
← Powrót do HTML Academy