<video> <track>

Introduktion

<track> tilføjer undertekster og andre slags tidsbestemte tekster til <audio> og <video>.

Demo

Browsertest

Browserunderstøttelse af track

	<track>	Formater
Firefox 19.0.2
Opera 12.10	2	WebVTT (.vtt)
Safari 5.1.7
Chrome 21	1	WebVTT (.vtt)
Internet explorer 10.0.9200.16438 Pre-Release		WebVTT (.vtt) TTML (.ttml)

1 For at aktiver <track> kan man starte Chrome med --enable-video-track parameteren fra kommandoprompten.
Eller ved at skrive chrome://flags i adressefeltet og aktiver Enable <track> element (Aktivér <track>-element).

2 Ser kun ud til at underteksten bliver vist hvis default attributten er angivet ved et <track> tag. Også selvom det kun er én <track>. Fordi der er ikke mulighed for at slå undertekster til på afspilleren eller ved højreklik endnu.

Screenshot

Her er screenshot fra Opera 12.10.
Opera 12.10 <track> undertekster

Her er screenshot fra Chrome 25.0.1320.2 canary hvor der er en CC knap hvor man kan slå undertekster til og fra.
Video med track undertekster screenshot chrome Chrome 25.0.1320.2 canary

Video med track undertekster screenshot chrome Chrome 25.0.1320.2 canary

I Chrome 18.0.1025.168 m vises der tekst bag afspilleren ved <audio>.
I Chrome 21.0.1136.0 canary vises der ikke tekster ved <audio>.
Audio med track undertekster screenshot chrome

Her er screenshot fra Internet explorer 10.0.9200.16438 Pre-Release hvor det er muligt at skifte mellem flere undertekstfiler så man kan skifte sprog og også slå undertekster fra.
Video track undertekster screenshot internet explorer 10.0.9200.16438 Pre-Release

Video track undertekster screenshot internet explorer 10.0.9200.16438 Pre-Release

Tag og attributter

Her ses hvordan <track> tagget bruges.

(Dobbelt-klik i kodefeltet for at marker alt)

Attribut	Betydning	Mulige værdier
src	sti til fil	For eksempel : tekstfil.srt tekstfil.vtt tekstfil.ttml
kind		subtitles captions descriptions chapters metadata
srclang	angiver sproget	For eksempel : da en fr de
label
default	skrives ved det track der skal være valgt som standard hvis der er flere tracks	[boolsk udtryk]

Formater

Her samle jeg info om de tids-tekst formater der formodentligt vil blive brugt til <track>.

	SRT	WebSRT	WebVTT	TTML
Beskrivelse	SubRip	Web Subtitle Resource Tracks	Web Video Text Track	Timed Text Markup Language TTML ligner HTML/XHTML/XML
Filendelse	.srt	.srt	.vtt	.ttml
MIME type	application/x-subrip	text/srt	text/vtt	application/ttml+xml
Eksempler	buyascooter.srt buyascooter_da.srt casper_og_mandrilaftalen.srt straighttothelight.srt		buyascooter_en.vtt buyascooter_da.vtt casper_og_mandrilaftalen.vtt straighttothelight.vtt	buyascooter_en.ttml
Bemærk	Bruges vist ikke med <track> med meget populært format der let kan omdannes til WebSRT/WebVTT	WebSRT er vist blevet omdøbt til WebVTT	WebVTT formatet (.vtt) er lavet ud fra SubRip formatet (.srt) SRT og WebVTT er næsten identiske.
Links			dev.w3.org An Introduction to WebVTT and <track> Live WebVTT Validator	w3.org
Encoding			UTF-8 Hvis filen er gemt som ANSI og man bruger tegn som æøå så stopper underteksterne når æøå tegnene skulle blive vist. I Chrome 19 og 21 i hvert fald.

SRT syntax

SRT eksempel

Her er et eksempel på engelske undertekster til begyndelsen af filmen "The taste of tea".

WebVTT syntax ... måske

WebVTT eksempel

Her ses et eksempel på starten af en undertekst fil.

Her er et eksempel på en chapter fil.

TTML eksempel

Track eksempel 1

Her er et eksempel på en video med danske undertekster.

(Dobbelt-klik i kodefeltet for at marker alt)

Track eksempel 2

Her er et eksempel på en video med undertekster på flere sprog hvor engelsk er valgt som standard med default attributten.

(Dobbelt-klik i kodefeltet for at marker alt)

Track eksempel 3

Her er et eksempel hvor der udover almindelige undertekster på engelsk og er English for the hard of hearing hvilket vist nok er de almindelige undertekster plus tekster hvor der står hvad der sker i videoen, for eksempel hvis der er en lyd eller nogen der hvisker.
Der er også beskrivelse til descriptions og chapters som dog ikke virker i nogen browsere endnu så vidt jeg ved så jeg venter på at kunne skrive noget om det.

(Dobbelt-klik i kodefeltet for at marker alt)

Undertekster med javascript

Mens vi venter på at browserne under understøtter <track> man vi bruge Javascript til at vise undertekster.
Læs mere på Undertekst med Javascript.

Her er 2 eksempler.

<audio> + SRT undertekster med Javascript

Video med Javascript undertekster

Test om browseren understøtter track

Med denne Javascript kode kan man teste om browseren understøtter <track>.

Så kan man bruge <track> hvis browseren understøtter det eller Javascript hvis browseren ikke gør.

(Dobbelt-klik i kodefeltet for at marker alt)

Koden ovenfor giver følgende resultat i din browser

Javascript track objekt

Her er noget kode der kan vise det tekst der er indlæst hvis browseren understøtter det.
Man kan nemlig også indsætte tekst fra Javascript, det behøver ikke være fra en seperat fil, men jeg ved endnu ikke så meget om det.

(Dobbelt-klik i kodefeltet for at marker alt)

Koden ovenfor giver følgende resultat i din browser

Syntax

MIME typer

For at tekstfilerne skal virke kan det måske være nødvendigt at sende filerne med den korrekte MIME type.

Hvis man bruger Apache som HTTP server kan det gøres vil at oprette en fil kaldet ".htaccess" i roden af hjemmesiden og skrive følgende i filen.