HTML-trackelement genereren
Of plak ondertiteltekst
Opties
Ondertitels zijn voor kijkers die de audio kunnen horen en de woorden nodig hebben — een vertaling, of dezelfde taal uitgeschreven. Ondertiteling voor doven en slechthorenden is voor kijkers die de audio niet kunnen horen, dus die draagt ook wat geluid aan iedereen vertelt: muziek, een deur, een telefoon die gaat. Hetzelfde bestand kan beide doelen dienen, daarom vraagt de pagina het in plaats van te gokken, en de waarde kan later niet meer van binnenuit het element worden gewijzigd. Beschrijvingen, hoofdstukken en metadata worden niet aangeboden: geen daarvan kan met de inhoud van een ondertitelbestand worden gevuld.
Een korte taaltag zoals en, en-GB of pt-BR, die de taal van de woorden in de ondertitels noemt, niet de taal van de video. Een track die zichzelf ondertitels noemt, moet een taal opgeven, dus een leeg vak valt terug op en in plaats van het attribuut weg te laten — en omdat elk attribuut in de uitvoer wordt afgedrukt, zie je de terugval voordat je iets plakt.
Vrije tekst: Nederlands, Nederlands (SDH), Français. Het is de regel die een kijker kiest wanneer een pagina meer dan één track aanbiedt, dus schrijf hem zoals je publiek hem herkent. Het vak leegmaken verwijdert het attribuut helemaal in plaats van een leeg attribuut te schrijven, wat de naamgeving aan de speler teruggeeft; een leeg label zou een naamloze rij in dat menu zetten.
Aan: de ondertitels verschijnen zodra de video speelt. Een media-element mag maar één standaardtack hebben, dus laat het uit wanneer de pagina er al een heeft: een tweede track die claimt de standaard te zijn, laat spelers de verkeerde kiezen, terwijl niet de standaard zijn alleen betekent dat de kijker hem zelf aanzet.
In welke beeldsnelheid de tijden worden geteld. Op de formaatpagina’s is dit wat MicroDVD nodig heeft, want het slaat tijden op als framenummers. Op de beeldsnelheidspagina’s is het de snelheid waartegen het bestand getimed is — de versie waarvoor de ondertitels gemaakt zijn — en het tweede vak op de pagina neemt de snelheid van de video die je gaat gebruiken. 23,976, 24, 25, 29,97, 30, 50, 59,94 en 60 zijn de gebruikelijke. Een verkeerde waarde verschuift de hele tijdlijn, en op de beeldsnelheidspagina’s verschuift ze die met een verhouding in plaats van met een vast bedrag.
Deze pagina zet je ondertitels in één HTML-element dat je in een pagina kunt plakken. Wat eruit komt is één regel `<track>` met de WebVTT als `data:`-URI in het `src`-attribuut, zodat de ondertiteltekst met de opmaak meereist: geen tweede bestand om te uploaden, geen pad om goed te zetten en geen speler die naar iets zoekt dat er niet is.
Dat inbedden is het hele punt van de pagina, en de reden is hoe browsers met lokale bestanden omgaan. Een track wordt opgehaald in plaats van getekend, en een browser weigert die ophaalactie wanneer de pagina zelf van schijf is geopend. Een `<track src="film.vtt">` op een pagina die je op je bureaublad hebt opgeslagen toont dus helemaal niets: geen fout op het scherm, een leeg ondertitelmenu en één regel in een console die de meeste mensen nooit openen. Een `data:`-URI wordt nooit opgehaald — de tekst staat in het attribuut — en werkt daar dus wel. De prijs is omvang, want elke spatie en elk regeleinde van de WebVTT wordt drie tekens, en die prijs is hier het betalen waard: het element bestaat juist om op zichzelf te werken.
De attributen komen uit de vakken op het paneel, omdat geen ervan uit je bestand te lezen is. `kind` weegt het zwaarst: `subtitles` is een vertaling voor kijkers die de audio niet kunnen volgen, en `captions` is de vollere variant die ook muziek en geluidseffecten meeneemt voor kijkers die het niet kunnen horen. Een bestand vol `[deur slaat dicht]` en muzieknoten kan beide zijn, en alleen jij weet voor welk publiek het is gemaakt — dus vraagt de pagina het in plaats van te gokken. De andere drie zijn de taal van de tekst, de naam die in het ondertitelmenu van de speler verschijnt, en of de track vanzelf moet openen.
Twee van die vakken gedragen zich anders wanneer je ze leegmaakt, en dat verschil is het kennen waard. De menunaam wissen haalt het attribuut helemaal weg, want een label is optioneel en het weglaten ervan laat de keuze aan de speler. De taal leegmaken doet dat niet: een track die zich als ondertitels aandient moet een taal noemen, dus valt een leeg vak terug op `en` in plaats van een element op te leveren dat iets mist wat het verplicht moet hebben. Geen van beide is een stille vervanging — de uitvoer print elk attribuut, zodat je ziet wat je vakken hebben opgeleverd.
De ondertiteltekst in het element wordt geschreven door dezelfde WebVTT-schrijver als de conversiepagina’s, wat betekent dat een bestand dat als WebVTT binnenkwam alles houdt wat het buiten zijn blokken droeg: de tekst op de `WEBVTT`-regel, commentaar- en stijlblokken en de instellingen per blok die bepalen waar een regel op het scherm staat. Aan je bestand verandert niets en er wordt niets geüpload; de woorden, de tijden en de opmaak vertrekken in de staat waarin ze aankwamen.
Voorbeelden
Een SRT-bestand met de standaardvakken
Invoer
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Uitvoer
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
Eén regel eruit, en het hele bestand zit erin: %0A is een regeleinde en %20 is een spatie, dus de WebVTT reist mee in het src-attribuut in plaats van in een bestand naast de pagina te staan. De vier attributen zijn de vier vakken — de taal van de tekst, de regel die een kijker in het ondertitelmenu van de speler kiest, en default, waardoor deze track vanzelf opent. De cuenummers uit de SRT blijven bewaard als cue-identificaties.
Een WebVTT-bestand gaat er als dezelfde WebVTT uit
Invoer
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
Uitvoer
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
Alles wat een WebVTT-bestand buiten zijn blokken bevat, overleeft: de opmerking op de WEBVTT-regel, het NOTE-blok, het STYLE-blok dat bepaalt hoe de ondertitels er in de speler uitzien, de naamregel van het blok en de instelling per blok align:start position:10% (de %25 daarin is een procentteken, gecodeerd omdat een kaal procentteken in een URI niet is toegestaan). Een bestand dat als WebVTT binnenkwam, gaat als diezelfde WebVTT naar buiten. De twee vakken zeggen en-GB en English (UK), omdat dit exemplaar voor een Brits publiek is gemaakt — niets in het bestand zei dat.
Ondertitels voor kijkers die niet kunnen horen
Invoer
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
Uitvoer
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
Het bestand staat vol geluidseffecten en muziek, en dat is precies waar kind="captions" — ondertitels voor kijkers die niet kunnen horen — voor is; het vak is de enige plek waar dat gezegd kan worden. Los daarvan is de menunaam getypt als Tom & "the boss" en komt die eruit als Tom & "the boss": een niet-geëscapete aanhalingsteken zou het attribuut daar hebben gesloten en de rest van de naam in rommelige attributen op het element hebben veranderd.
Drie vakken leeggemaakt of uitgezet
Invoer
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
Uitvoer
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
Drie vakken veranderd, drie verschillende resultaten, omdat HTML verschillende dingen vraagt. De menunaam is helemaal uit het element verdwenen — die is optioneel, en weglaten laat de beslissing aan de speler. Het taalvak is leeg en levert toch srclang="en": een track die zich als ondertitels aandient moet een taal noemen, dus een lege bestaat niet, en de terugval is in de uitvoer zichtbaar. De default-schakelaar staat uit en dat attribuut is ook weg, dus deze track opent niet vanzelf; dat is de veilige richting wanneer een pagina meer dan één track draagt.
Veelgestelde vragen
Heb ik nog een .vtt-bestand naast mijn pagina nodig?
Nee, en dat is het punt van deze pagina. De WebVTT wordt als data:-URI in het src-attribuut geschreven, dus het element draagt zijn eigen ondertitels. Je kunt het in een pagina plakken, het bestand mailen of naar een andere map verplaatsen en de ondertitels verschijnen nog steeds. Het enige waar je op moet letten is dat het geheel één attribuut is: kopieer je maar een deel van die lange regel, dan heb je de URI gebroken en blijft de track leeg.
Werkt dit ook als ik het HTML-bestand gewoon van mijn eigen computer open?
Ja, en dat geval is de reden dat de pagina de ondertitels inbedt. Wanneer een pagina van schijf wordt geopend, weigert een browser een los trackbestand op te halen, dus een track die naar film.vtt wijst zou niets tonen — geen zichtbare fout, alleen een leeg ondertitelmenu. Een data:-URI wordt helemaal niet opgehaald; de tekst staat al in het attribuut, dus het werkt op je bureaublad net zo goed als op een server.
Waarom is de uitvoer zo veel langer dan mijn ondertitelbestand?
Omdat elk teken dat geen letter of cijfer is er in een URI drie wordt — een spatie is %20 en een regeleinde is %0A. Een bestand van honderd kilobyte wordt een paar honderd. Base64 zou korter zijn, ongeveer een derde meer dan het origineel in plaats van het dubbele, maar het resultaat zou een muur van onleesbare tekens zijn; zoals het nu is, kun je in het src-attribuut je eigen dialoog herkennen, en dat is de extra omvang waard voor een bestand dat je in een pagina plakt en met de hand onderhoudt.
Waarom staat er geen label-attribuut meer nadat ik het vak heb leeggemaakt?
Omdat een menunaam in HTML optioneel is, en weglaten betekent niet „geen naam" — het betekent dat de speler beslist wat er in zijn ondertitelmenu staat, meestal de taal. Het vak leegmaken haalt het attribuut daarom weg in plaats van een leeg attribuut te schrijven, want label="" zou als een blanco regel in dat menu verschijnen. Je kunt op elk moment weer een naam invullen; het is een gewone tekenreeks en niets anders op de pagina hangt ervan af.
Wat is hier het verschil tussen subtitles en captions?
Voor wie ze bedoeld zijn. Subtitles gaan ervan uit dat de kijker de audio kan horen en de woorden vertaald of uitgeschreven nodig heeft; captions gaan ervan uit dat de kijker die niet kan horen, dus dragen ze ook wat een horend publiek via geluid binnenkrijgt — muziek, deuren, een telefoon die gaat. Een bestand kan beide doelen dienen en dezelfde tekst staat in allebei, dus de pagina kan niet zien welke je bedoelt. Achteraf in het element veranderen kan ook niet, dus kies degene die jouw publiek nodig heeft.
Welke andere track-soorten heb je weggelaten?
Drie: descriptions, die het beeld vertellen voor kijkers die het niet kunnen zien; chapters, dat navigatie is in plaats van ondertitels en op deze site een eigen pagina heeft; en metadata, dat aan niemand wordt getoond. Geen van de drie kan met de inhoud van een ondertitelbestand worden gevuld, dus ze aanbieden zou alleen een element opleveren dat niets toont. De twee die wel worden aangeboden zijn de twee die een ondertitelbestand echt kan dienen.
Verandert er iets aan mijn ondertitels onderweg?
De tekst, de tijden en de opmaak blijven ongewijzigd, en een WebVTT-bestand houdt zijn eigen commentaar-, stijl- en regioblokken plus zijn instellingen per blok. Wat wel verandert is de vorm: de regels worden in WebVTT-syntaxis herschreven, want dat is wat spelers lezen, dus de komma in 00:00:01,000 van een SRT-bestand wordt een punt. Eén byte verdwijnt bewust — een voorloopmarkering die zegt dat het bestand UTF-8 is, omdat de data-URI de codering zelf vermeldt en de markering anders als drie losse tekens aan het begin zou verschijnen.