HTML Academy · Oppitunti

Tekstitykset track-elementillä ja WebVTT:llä

Lisää videoon kuvatekstit ja tekstitykset track-elementillä ja .vtt-tiedostoilla

Oppitunti 4/414 vaihetta

Tekstitykset track-elementillä ja WebVTT:llä on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Tekstitykset ja kuvatekstit

Videon saavutettavuus edellyttää äänisisällölle tekstimuotoisia vaihtoehtoja:

Tekstitykset — puheen litterointi, olettaen että katsoja kuulee äänet
Kuvatekstit — puhe ja äänien kuvaukset (kuuroille käyttäjille)
Äänikuvaukset — visuaalisen sisällön kuvaus sokeille käyttäjille

track-elementti

<track>-elementti yhdistää tekstitys- tai kuvatekstitiedoston videoon:

<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>

track-elementin attribuutit

track-elementin attribuutit:

src — VTT-tiedoston polku
kind — raidan tyyppi (subtitles, captions, descriptions, chapters, metadata)
srclang — BCP 47 -kielikoodi (en, es, fr...)
label — käyttäjälle ymmärrettävä nimi, joka näytetään CC-valikossa
default — totuusarvo; tämä raita näytetään oletusarvoisesti

WebVTT-muoto

WebVTT (Web Video Text Tracks) on tekstitystiedostojen muoto:

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...

VTT-cue-tunnisteet

VTT-cueilla voi olla valinnaisia tunnisteita:

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.

VTT-cue-asetukset

VTT-cuet tukevat sijoitteluasetuksia:

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.

WebVTT-cuejen muotoilu CSS:llä

Muotoilkaa cue-laatikot ::cue-pseudoelementillä:

/* 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;
}

kind-attribuutin arvot

kind-attribuutti määrittää tekstiraidan tarkoituksen:

subtitles — puheen käännös tai litterointi
captions — puhe ja äänikuvaukset kuuroille käyttäjille
descriptions — visuaalisen sisällön äänikuvaus sokeille käyttäjille
chapters — lukujen otsikot navigointia varten
metadata — koneellisesti luettavat tiedot JavaScriptille

chapters-raita

Käyttäkää kind=chapters-arvoa videon lukujen navigointiin:

<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
-->

JavaScriptin TextTrack API

Käsitelkää raidan tietoja TextTrack APIlla:

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);
});

Metadataraita vuorovaikutteiseen videoon

Käyttäkää metadata-raitoja JavaScript-tapahtumien käynnistämiseen tiettyinä ajankohtina:

<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>

Saavutettavuusvaatimukset

WCAG edellyttää esinauhoitetun videon tekstityksiä:

Taso A — tekstitykset kaikille esinauhoitetuille ääntä sisältäville videoille
Taso AA — äänikuvaukset kaikille esinauhoitetuille videoille
Automaattisesti luodut tekstitykset (YouTube) eivät riitä ilman tarkistusta
Tekstitysten on oltava täsmällisiä, synkronoituja ja täydellisiä

Pikatesti

Mikä ero on track-tyypeillä subtitles ja captions?

Vastaa interaktiivisessa oppitunnissa

Kertaus: track ja WebVTT

Tekstitysten ja kuvatekstien perusteet:

<track src kind srclang label default> video-elementin sisällä
kind: subtitles, captions, descriptions, chapters, metadata
WebVTT-tiedostomuoto: WEBVTT + aikaleima --> aikaleima + teksti
Muotoilkaa cue-elementit ::cue-CSS-pseudoelementillä
WCAG edellyttää esinauhoitetun videon tekstityksiä

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tekstitykset track-elementillä ja WebVTT:llä” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tekstitykset track-elementillä ja WebVTT:llä”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tekstitykset track-elementillä ja WebVTT:llä”?

Lisää videoon kuvatekstit ja tekstitykset track-elementillä ja .vtt-tiedostoilla Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Tekstitykset track-elementillä ja WebVTT:llä”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

audio-elementti: src, controls, loop ja autoplay
video-elementti ja kuvasuhde
source-elementti useille formaateille
Tekstitykset track-elementillä ja WebVTT:llä

← Takaisin: HTML Academy