Skapa ett HTML track-element
Eller klistra in undertexttext
Inställningar
Undertexter är för tittare som hör ljudet och behöver orden – en översättning, eller samma språk nedskrivet. Undertexter för hörselskadade är för tittare som inte hör det, så de bär också det ljudet säger till alla andra: musik, en dörr, en telefon som ringer. Samma fil kan tjäna båda syftena, vilket är varför sidan frågar i stället för att gissa, och värdet kan inte ändras senare inifrån elementet. Beskrivningar, kapitel och metadata erbjuds inte: ingen av dem kan fyllas med innehållet i en undertextfil.
En kort språktagg som en, en-GB eller pt-BR, som namnger språket för orden i undertexterna, inte språket i videon. Ett spår som kallar sig undertexter måste namnge ett språk, så att tömma det här fältet faller tillbaka på en i stället för att släppa attributet – och eftersom varje attribut skrivs ut i resultatet kan du se reservvärdet innan du klistrar in något.
Fri text: English, English (SDH), Français. Det är raden en tittare väljer när en sida erbjuder mer än ett spår, så skriv den som din publik skulle känna igen den. Tömmer du fältet tas attributet bort helt i stället för att ett tomt skrivs, vilket lämnar tillbaka namngivningen till spelaren; en tom etikett skulle sätta en namnlös rad i den menyn.
På, så dyker undertexterna upp så snart videon spelas. Ett medieelement får bara ha ett standardspår, så lämna det av när sidan redan bär ett: ett andra spår som påstår sig vara standard får spelare att välja fel, medan att inte vara standard bara betyder att tittaren slår på det själv.
Vilken bildfrekvens tiderna räknas i. På formatsidorna är det här vad MicroDVD behöver, eftersom formatet lagrar tider som bildnummer. På bildfrekvenssidorna är det den frekvens som filens tider byggdes för – den version som undertexterna gjordes för – och sidans andra fält tar frekvensen för den video du ska använda dem med. 23,976, 24, 25, 29,97, 30, 50, 59,94 och 60 är de vanligaste. Blir det fel förskjuts hela tidslinjen, och på bildfrekvenssidorna förskjuts den med ett förhållande i stället för med ett fast belopp.
Den här sidan placerar dina undertexter inuti ett enda HTML-element som du kan klistra in på en webbsida. Ut kommer en rad med ett track-element där WebVTT-texten ligger inbäddad i src-attributet som en data-URI, så undertexten följer med markupen själv – det finns ingen andra fil att ladda upp, ingen sökväg att få rätt och ingen möjlighet för spelaren att leta efter något som inte finns.
Inbäddningen är hela poängen, och skälet är hur webbläsare hanterar lokala filer. Ett spår hämtas i stället för att ritas upp, och webbläsaren vägrar hämta det när själva sidan öppnades från disk. En track-rad som pekar på film.vtt på en sida du sparat på skrivbordet visar alltså ingenting: inget fel på skärmen, en tom undertextmeny och en rad i konsolen som de flesta aldrig öppnar. En data-URI hämtas aldrig – texten sitter redan i attributet – och fungerar därför. Priset är storlek, eftersom varje mellanslag och radbrytning i WebVTT blir tre tecken, men det priset är värt att betala här: elementet finns för att fungera på egen hand.
Attributen kommer från fälten på panelen, eftersom ingen av dem kan läsas ut ur filen. kind är viktigast: subtitles är en översättning för tittare som inte kan följa ljudet, medan captions är den fylligare varianten som också bär musik och ljudeffekter för tittare som inte hör. En fil full av [dörren slår igen] och nottecken kan vara vilket som helst av de två, och bara du vet vilken publik den skrevs för – därför frågar sidan i stället för att gissa. De andra tre är språket texten är skriven på, namnet som visas i spelarens undertextmeny och om spåret ska öppnas automatiskt.
Två av fälten beter sig olika när du tömmer dem. Ett tomt menynamn tar bort attributet helt, eftersom en etikett är valfri och spelaren då får välja själv. Ett tomt språkfält gör det inte: ett spår som deklarerar sig som subtitles måste ange ett språk, så fältet faller tillbaka på en i stället för att producera ett element som saknar något det måste ha. Ingen av dessa är en tyst ersättning – utdata skriver ut varje attribut, så du ser vad fälten gav.
Själva undertexttexten skrivs av samma WebVTT-skrivare som konverteringssidorna använder, vilket innebär att en fil som kom in som WebVTT behåller allt den bar utanför textblocken: texten på WEBVTT-raden, kommentars- och stilblock samt varje textblocks egen inställning för placering. Inget i filen ändras och inget laddas upp; orden, tiderna och formateringen lämnar sidan i samma skick som de kom in.
Exempel
En SRT-fil med standardfälten
Indata
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Resultat
<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>
En rad ut, och hela filen ligger inuti den: %0A är en radbrytning och %20 ett mellanslag, så WebVTT-texten följer med i src-attributet i stället för att ligga i en fil bredvid sidan. De fyra attributen är de fyra fälten – språket texten är skriven på, raden en tittare väljer i spelarens meny och default, som gör att spåret öppnas automatiskt. Textblocksnumren från SRT behålls som identifierare.
En WebVTT-fil går in som samma WebVTT
Indata
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.
Resultat
<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>
Allt en WebVTT-fil bär utanför textblocken överlever: kommentaren på WEBVTT-raden, NOTE-blocket, STYLE-blocket som bestämmer hur undertexten ser ut i spelaren, textblockets namnrad och inställningen align:start position:10% (procenttecknet syns som %25 eftersom ett bart procenttecken inte är tillåtet i en URI). En fil som kom in som WebVTT går ut som samma WebVTT. Fälten säger en-GB och English (UK), eftersom den här kopian gjordes för en brittisk publik – inget i filen sade det.
Undertexter för tittare som inte hör
Indata
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 ♪
Resultat
<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>
Filen är full av ljudeffekter och musik, vilket är precis vad kind=”captions” – undertexter för tittare som inte hör – är till för, och fältet är det enda stället där det kan sägas. Menynamnet skrevs dessutom som Tom & ”the boss” och kommer ut som Tom & "the boss": ett oescapeterat citattecken skulle ha stängt attributet där och gjort resten av namnet till skräpattribut på elementet.
Tre fält tömda eller avstängda
Indata
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?
Resultat
<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">
Tre fält ändrade, tre olika resultat, eftersom HTML begär olika saker. Menynamnet är borta från elementet helt – det är valfritt, och utan det får spelaren bestämma. Språkfältet är tomt och ger ändå srclang=”en”: ett spår som deklarerar sig som subtitles måste ange ett språk, så det finns inget tomt sådant, och reservvärdet syns i utdata. Standardväxeln är av och attributet är borta, så det här spåret öppnas inte automatiskt – den säkra riktningen när en sida bär fler än ett spår.
Vanliga frågor
Behöver jag fortfarande en .vtt-fil bredvid sidan när track-elementet är byggt?
Nej, och det är hela poängen med den här sidan. WebVTT-texten skrivs in i src-attributet som en data-URI, så track-elementet bär sina egna undertexter. Du kan klistra in raden på en sida, mejla filen eller flytta den till en annan mapp och undertexten visas ändå. Det enda du ska akta dig för är att raden är ett enda attribut: kopierar du bara en del av den långa raden har du brutit URI:n, och då blir spåret tomt.
Fungerar track-elementet om jag öppnar HTML-filen direkt från datorn?
Ja, och just det fallet är skälet till att sidan bäddar in undertexten. När en sida öppnas från disk vägrar webbläsaren hämta en separat spårfil, så ett track-element som pekar på film.vtt skulle visa ingenting – inget synligt fel, bara en tom undertextmeny. En data-URI hämtas inte alls, texten ligger redan i attributet, och därför fungerar elementet lika bra på skrivbordet som på en server.
Varför blir track-raden mycket längre än min undertextfil?
Eftersom varje tecken som inte är en bokstav eller siffra blir tre tecken i en URI – ett mellanslag är %20 och en radbrytning är %0A. En fil på hundra kilobyte blir några hundra. Base64 skulle bli kortare, ungefär en tredjedel över originalet i stället för det dubbla, men resultatet skulle vara en vägg av oläsbara tecken; som det är nu kan du titta på src-attributet och känna igen din egen dialog inuti det, vilket är värt den extra storleken för en rad du ska klistra in och underhålla för hand.
Varför saknas label-attributet efter att jag tömde namnfältet i track-elementet?
Eftersom ett menynamn är valfritt i HTML, och att lämna det utanför betyder inte ”inget namn” – det betyder att spelaren avgör vad som visas i undertextmenyn, oftast språket. Ett tomt fält tar därför bort attributet i stället för att skriva ett tomt sådant, eftersom label=”” skulle synas som en tom rad i menyn. Du kan sätta tillbaka ett namn när som helst; det är en vanlig sträng och inget annat på sidan beror på den.
Vad skiljer kind subtitles från kind captions i det track-element sidan skriver?
Publiken. Subtitles utgår från att tittaren hör ljudet och behöver orden översatta eller utskrivna; captions utgår från att tittaren inte hör det och bär därför också information som en hörande publik får genom ljudet – musik, dörrar, en telefon som ringer. En fil kan tjäna båda syftena och texten är densamma, så sidan kan inte avgöra vilket du menar. Det går inte heller att ändra i efterhand inuti elementet, så välj det din publik behöver.
Vilka andra track-typer har du lämnat utanför elementet?
Tre: descriptions, som beskriver bilden för tittare som inte ser den; chapters, som är navigering snarare än undertexter och har en egen sida här på sajten; och metadata, som inte visas för någon. Ingen av de tre kan fyllas med innehållet i en undertextfil, så att erbjuda dem skulle bara låta dig bygga ett element som visar ingenting. De två som erbjuds är de två en undertextfil faktiskt kan tjäna.
Ändras något i mina undertexter när de blir en inbäddad WebVTT i track-elementet?
Texten, tiderna och formateringen är oförändrade, och en WebVTT-fil behåller sina egna kommentars-, stil- och regionblock plus varje textblocks inställningar. Det som ändras är formen: raderna skrivs om i WebVTT-syntax, som är det spelare läser, så en SRT-fils komma i 00:00:01,000 blir en punkt. En byte tas bort med avsikt – en inledande markör som säger att filen är UTF-8, eftersom data-URI:n anger kodningen själv och markören annars skulle synas som tre främmande tecken i början.