<track> - HTML

<track> elementet bruges sammen med <audio> og <video> elementerne til at vise undertekster og andre slags tidsbestemte tekster i formater som WebVTT og TTML

Introduktion

Med <track> elementet kan man tilføje undertekster til <video> som det ses på dette screenshot.
Firefox Nightly 28.0a1  undertekster

Demo


<VIDEO> + <TRACK> DEMO
(PÅ EN SIDE FOR SIG SELV)


<audio> med <track> viser i skrivende stund ikke teksten men man kan afspille en lydfil i <video> for at få vist teksten i afspilleren. Så kan man eventuelt sætte størrelsen med CSS width og height.

Her ses 2 afspillere med <track> der afspiller den samme lydfil så man kan se forskellen.
Eneste forskel er at den ene afspiller er <audio> og den anden afspiller er <video>.


<AUDIO> + <TRACK> DEMO
(PÅ EN SIDE FOR SIG SELV)

Browsertest

Browserunderstøttelse af track

Browser <track> Formater
Firefox logo
Firefox 31.0
Ja WebVTT (.vtt)
Opera logo
Opera 20.0 (webkit)
Ja2 WebVTT (.vtt)
Safari logo
Safari 5.1.7
Nej3
Chrome logo
Chrome 30.0.1599.69 m
Ja WebVTT (.vtt)
Internet Explorer logo
Internet Explorer 11.0.9600.16428
Ja WebVTT (.vtt)
TTML (.ttml)
All tests are made on Windows 7 (64-bit)



1 Kan aktiveres ved at sætte about:config?filter=media.webvtt.enabled til true.

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

3 Skulle virke i Safari 6 men jeg har ikke mulighed for at teste.
Browserunderstøttelse fra caniuse.com :

Screenshot

Her ses nogen screenshot fra forskellige browsere som understøtter undertekster med <track>.

Her er screenshot fra Firefox 28.0.
Video track undertekster screenshot Firefox 28.0

Her er screenshot fra Opera 20.0.
CC knappen bruges til at slå undertekster til og fra.
CC er kort for Closed Captions.
Opera 20.0  undertekster

Her er screenshot fra Chrome 30.0.1599.69 m.
Video med track undertekster screenshot Chrome 30.0.1599.69 m

Her er screenshot fra Internet Explorer 11.0.9600.16428 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 11.0.9600.16428

Element og attributter

Her ses hvordan <track> bruges med tilhørende attributter.

Attribut Betydning Mulige værdier
src sti til fil For eksempel :
tekstfil.vtt
tekstfil.ttml
kind subtitles
captions
descriptions
chapters
metadata
srclang angiver sproget For eksempel :
da
en
fr
de
label tekst om kommer til at stå i listen når man skal vælge mellem de forskellige tracks For eksempel :
Dansk
Dansk for hørehæmmede
English
English for the hard of hearing
default skrives ved det track der skal være valgt som standard hvis der er mere end ét track [boolsk udtryk]

Formater

Her samle jeg info om de tids-tekst formater der formodentligt vil blive brugt til <track>.
Format Filendelse Mime type Eksempler Bemærk Links Encoding
WebVTT (Web Video Text Tracks) .vtt text/vtt buyascooter_en.vtt

buyascooter_da.vtt

casper_og_mandrilaftalen_da.vtt

straighttothelight_en.vtt
WebVTT formatet (.vtt) er lavet ud fra SubRip formatet (.srt)

SRT og WebVTT er næsten identiske.
dev.w3.org

An Introduction to WebVTT and <track>

Live WebVTT Validator
Skal være UTF-8.

Jeg har i Chrome 19 og 21 opleveet at hvis filen er gemt som ANSI og man bruger tegn som æøå så stopper underteksterne når æøå tegnene skulle blive vist.
TTML .ttml application/ttml+xml buyascooter_en.ttml w3.org
WebSRT .srt text/srt WebSRT er vist blevet omdøbt til WebVTT
SRT .srt application/x-subrip buyascooter_en.srt

buyascooter_da.srt

casper_og_mandrilaftalen_da.srt

straighttothelight_en.srt
Bruges vist ikke med <track> med meget populært format der let kan omdannes til WebSRT/WebVTT

MIME type

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

Du kan bruge HTTP Header Checker til at teste om filerne bliver sendt med korrekt MIME type på dit webhotel.
Kig hvor der står Content-type i headeren.

SRT syntax

SRT eksempel

Her er et eksempel på 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 kode eksempel 1

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

Track kode eksempel 2

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

Track kode eksempel 3

Her er et eksempel hvor der udover almindelige undertekster på engelsk også er English for the hard of hearing hvilket vistnok 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.

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 understøtter det.
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 separat fil, men jeg ved endnu ikke så meget om det.
Koden ovenfor giver følgende resultat i din browser
Start video for at vise track info

Undertekster med JavaScript

Mens vi venter på at browserne understøtter <track> så kan vi bruge JavaScript til at vise undertekster.

Læs mere på Undertekster med JavaScript.

Her er 2 eksempler med <audio> og <video> som viser undertekster i SRT format.
<AUDIO> + SRT UNDERTEKSTER MED JAVASCRIPT<VIDEO> + SRT UNDERTEKSTER MED JAVASCRIPT
Vote
0

Note : I have changed the voting-system, so instead of each page having a rating between 1 and 5, now 1 point is added og removed depending on if its the up-button or down-button that is pressed. I have move the votes from the old system to the new system.
Search
Quick links
Shows the websites menu with images so its easier to understand what the pages are about Show the latest news from the website Write a message to me making the website Introduction to the website Roll the dice and visit a random page on the website Radio streaming TV streaming GetUserMedia (Webcam and microphone) WebGL (3D) <canvas> + WebGL demoer Fullscreen Geolocation CSS multi-column Test your browser for support of the different web technologies i use on the website Links Soundboard Kat adventure ½ Educational videos for making websites HTML5 templates you can use as a starting point when creating HTML5 pages front the scratch
Language

Select English to navigate the website in English. Things like the navigation-menu and contact form will be in English, but the main content on each page will not be translated.
Page information
Page was last updated Sunday 21. September 2014