Luo HTML track -elementti
Tai liitä tekstityksen teksti
Asetukset
Tekstitykset on tarkoitettu katsojille, jotka kuulevat äänen ja tarvitsevat sanat — käännös tai sama kieli kirjoitettuna. Kuulovammaisten tekstitykset on tarkoitettu katsojille, jotka eivät kuule ääntä, joten ne välittävät myös sen, mitä ääni kertoo kaikille muille: musiikin, oven, soivan puhelimen. Sama tiedosto voi palvella kumpaakin tarkoitusta, minkä vuoksi sivu kysyy eikä arvaa, eikä arvoa voi muuttaa myöhemmin elementin sisältä. Kuvauksia, lukuja ja metatietoja ei tarjota: niitä ei voi täyttää tekstitystiedoston sisällöllä.
Lyhyt kielitunniste kuten en, en-GB tai pt-BR, joka nimeää tekstityksen sanojen kielen, ei videon kieltä. Itsensä tekstityksiksi nimeävän raidan on ilmoitettava kieli, joten tämän laatikon tyhjentäminen palaa arvoon en eikä pudota attribuuttia — ja koska jokainen attribuutti tulostetaan tuotokseen, näet varavaihtoehdon ennen kuin liität mitään.
Vapaata tekstiä: Suomi, English (SDH), Français. Se on rivi, jonka katsoja valitsee, kun sivu tarjoaa useamman raidan, joten kirjoita se niin, että yleisösi tunnistaa sen. Laatikon tyhjentäminen poistaa attribuutin kokonaan sen sijaan, että kirjoittaisi tyhjän, mikä palauttaa nimeämisen soittimelle; tyhjä nimi laittaisi valikkoon nimeämättömän rivin.
Päällä tekstitykset tulevat näkyviin heti, kun video alkaa. Mediaelementillä saa olla vain yksi oletusraita, joten jätä tämä pois, kun sivulla on jo sellainen: toinen raita, joka väittää olevansa oletus, saa soittimet valitsemaan väärän, kun taas oletuksena oleminen tarkoittaa vain, että katsoja kytkee sen itse.
Kuvanopeus, jossa ajoitukset on laskettu. Muotosivuilla tätä tarvitsee MicroDVD, koska se tallentaa ajoituksen ruutunumeroina. Kuvanopeussivuilla tämä on nopeus, jota vasten tiedosto ajastettiin — versio, jolle tekstitys tehtiin — ja sivun toinen laatikko ottaa sen videon nopeuden, jonka kanssa aiot tekstitystä käyttää. Yleisiä ovat 23,976, 24, 25, 29,97, 30, 50, 59,94 ja 60. Väärä arvo siirtää koko aikajanaa, ja kuvanopeussivuilla se siirtää sitä suhteellisesti eikä kiinteällä määrällä.
Tämä sivu upottaa tekstityksesi yhteen HTML-elementtiin, jonka voit liittää sivulle. Tuloksena on yksi `<track>`-rivi, jonka `src`-attribuutissa on WebVTT sellaisenaan, joten tekstityksen teksti kulkee merkinnän mukana — ei toista tiedostoa ladattavaksi, ei polkua, joka pitäisi saada oikein, eikä mitään tapaa, jolla soitin jäisi etsimään jotain, mitä ei ole.
Juuri tuo upotus on koko sivun pointti, ja syy on siinä, miten selaimet kohtelevat paikallisia tiedostoja. Raide haetaan eikä piirretä, ja selain kieltäytyy hakemasta sitä, kun sivu itse avattiin levyltä. Niinpä `<track src="film.vtt">` työpöydälle tallennetulla sivulla ei näytä mitään: ei virhettä ruudulla, tyhjä tekstitysvalikko ja yksi rivi konsolissa, jota useimmat eivät koskaan avaa. `data:`-URI:ta ei koskaan haeta — teksti istuu attribuutissa — joten se toimii siellä. Hinta on koko: jokainen WebVTT:n välilyönti ja rivinvaihto muuttuu kolmeksi merkiksi, ja se hinta kannattaa maksaa tässä, koska elementti on olemassa juuri siksi, että se toimii yksinään.
Attribuutit tulevat paneelin kentistä, koska mitään niistä ei voi lukea tiedostostasi. `kind` on tärkein: subtitles on käännös katsojille, jotka eivät voi seurata ääntä, ja captions on täydempi versio, joka kantaa myös musiikin ja äänitehosteet katsojille, jotka eivät kuule niitä. Tiedosto täynnä `[oven pamahdus]` -merkintöjä ja nuotteja voisi olla kumpi tahansa, ja vain sinä tiedät, mille yleisölle se tehtiin — siksi sivu kysyy sen sijaan että arvaisi. Kolme muuta ovat tekstin kieli, soittimen tekstitysvalikossa näkyvä nimi ja se, avautuuko raide itsestään.
Kaksi noista kentistä käyttäytyy eri tavoin, kun ne tyhjentää, ja ero kannattaa tuntea. Valikon nimen tyhjentäminen poistaa attribuutin kokonaan, koska nimi on valinnainen ja pois jätettynä se yksinkertaisesti jättää valinnan soittimelle. Kielen tyhjentäminen ei tee niin: raide, joka ilmoittaa olevansa subtitles, on velvollinen nimeämään kielen, joten tyhjä kenttä palaa arvoon `en` sen sijaan että tuottaisi elementin, josta puuttuu jotain pakollista. Kumpikaan ei ole hiljainen korvaus — tuloste tulostaa jokaisen attribuutin, joten näet, mitä kenttäsi tuottivat.
Elementin sisällä olevan tekstitystekstin kirjoittaa sama WebVTT-kirjoittaja, jota muunnossivut käyttävät. Siksi WebVTT:nä saapunut tiedosto säilyttää kaiken, mitä se kantoi alaotsikoidensa ulkopuolella: `WEBVTT`-rivin tekstin, kommentti- ja tyylilohkot sekä alaotsikkokohtaiset asetukset, jotka päättävät, missä rivi istuu ruudulla. Tiedostostasi ei muutu mitään eikä mitään lähetetä palvelimelle; sanat, ajat ja tyylittely lähtevät siinä tilassa, jossa ne saapuivat.
Esimerkit
SRT-tiedosto oletuskentillä
Syöte
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Tuotos
<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>
Yksi rivi ulos, ja koko tiedosto on sen sisällä: %0A on rivinvaihto ja %20 on välilyönti, joten WebVTT kulkee src-attribuutissa sen sijaan että istuisi sivun vieressä tiedostossa. Neljä attribuuttia ovat neljä kenttää — tekstin kieli, rivi, jonka katsoja valitsee soittimen tekstitysvalikosta, ja default, joka saa tämän raiteen avautumaan itsestään. SRT:n alaotsikkonumerot säilyvät alaotsikoiden tunnisteina.
WebVTT-tiedosto lähtee samana WebVTT:nä
Syöte
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.
Tuotos
<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>
Kaikki, mitä WebVTT-tiedosto kantaa alaotsikoidensa ulkopuolella, säilyy: WEBVTT-rivin huomautus, NOTE-lohko, STYLE-lohko, joka päättää miltä tekstitys näyttää soittimessa, alaotsikon nimiviiva ja alaotsikkokohtainen asetus align:start position:10% (%25 siinä on prosenttimerkki koodattuna, koska paljas prosenttimerkki ei ole sallittu URI:ssa). WebVTT:nä saapunut tiedosto lähtee samana WebVTT:nä. Kaksi kenttää sanovat en-GB ja English (UK), koska tämä kopio tehtiin brittiläiselle yleisölle — mikään tiedostossa ei sanonut sitä.
Tekstitys katsojille, jotka eivät kuule
Syöte
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 ♪
Tuotos
<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>
Tiedosto on täynnä äänitehosteita ja musiikkia, ja juuri sitä varten kind="captions" on: se on tekstitys katsojille, jotka eivät kuule. Vain kenttä voi sanoa sen. Erikseen valikon nimi kirjoitettiin muodossa Tom & "the boss" ja lähtee muodossa Tom & "the boss": koodaamaton lainausmerkki olisi sulkenut attribuutin siihen paikkaan ja tehnyt nimen lopusta elementin sekavia attribuutteja.
Kolme kenttää tyhjennetty tai kytketty pois
Syöte
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?
Tuotos
<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">
Kolme kenttää muutettu, kolme eri tulosta, koska HTML pyytää eri asioita. Valikon nimi on kadonnut elementistä kokonaan — se on valinnainen, ja pois jättäminen jättää päätöksen soittimelle. Kielikenttä on tyhjä ja tuottaa silti srclang="en": raide, joka ilmoittaa olevansa subtitles, on velvollinen nimeämään kielen, joten tyhjää sellaista ei ole olemassa, ja varalla käytetty arvo näkyy tulosteessa. Oletuskytkin on pois päältä ja myös se attribuutti on poissa, joten tämä raide ei avaudu itsestään — turvallinen suunta, kun sivulla on useampi kuin yksi.
Usein kysytyt kysymykset
Tarvitsenko vielä .vtt-tiedoston sivun viereen?
Et, ja se on koko sivun pointti. WebVTT kirjoitetaan src-attribuuttiin data:-URI:na, joten elementti kantaa tekstityksensä itse. Voit liittää sen sivulle, lähettää tiedoston sähköpostilla tai siirtää sen toiseen kansioon, ja tekstitys näkyy silti. Yksi asia kannattaa muistaa: koko juttu on yhtä attribuuttia — jos kopioit siitä pitkästä rivistä vain osan, olet rikkonut URI:n ja raide on tyhjä.
Toimiiko tämä, jos avaan HTML-tiedoston suoraan omalta koneeltani?
Toimii, ja juuri se tapaus on syy siihen, että sivu upottaa tekstityksen. Kun sivu avataan levyltä, selain kieltäytyy hakemasta erillistä raidatiedostoa, joten film.vtt:tä osoittava raide näyttäisi tyhjää — ei näkyvää virhettä, vain tyhjä tekstitysvalikko. data:-URI:ta ei haeta lainkaan, teksti on jo attribuutissa, joten se toimii työpöydälläsi samoin kuin palvelimella.
Miksi tuloste on paljon pidempi kuin tekstitystiedostoni?
Koska jokaisesta merkistä, joka ei ole kirjain tai numero, tulee URI:ssa kolme: välilyönti on %20 ja rivinvaihto %0A. Sadan kilotavun tiedostosta tulee muutama sata. Base64 olisi lyhyempi, noin kolmanneksen alkuperäistä pidempi eikä kaksinkertainen, mutta tuloksena olisi lukukelvoton merkkipöheikkö; näin voit katsoa src-attribuuttia ja tunnistaa oman dialogisi sen sisältä, mikä on lisäkoko hinnan arvoista tiedostolle, jonka aiot liittää sivulle ja pitää yllä käsin.
Miksi label-attribuuttia ei ole, kun tyhjensin kentän?
Koska valikon nimi on HTML:ssä valinnainen, ja pois jättäminen ei tarkoita ei nimeä — se tarkoittaa, että soitin päättää, mitä sen tekstitysvalikossa näytetään, ja se on yleensä kieli. Kentän tyhjentäminen poistaa siksi attribuutin sen sijaan että kirjoittaisi tyhjän, koska label="" näkyisi valikossa tyhjänä rivinä. Nimen voi laittaa takaisin milloin tahansa; se on tavallinen merkkijono eikä mikään muu sivulla riipu siitä.
Mitä eroa tässä on subtitles- ja captions-arvoilla?
Se, kenelle ne on tarkoitettu. Subtitles olettaa, että katsoja kuulee äänen ja tarvitsee sanat käännettynä tai kirjoitettuna; captions olettaa, ettei katsoja kuule sitä, joten ne kantavat myös tiedon, joka saavuttaa kuulevan yleisön äänen kautta — musiikin, ovet, soivan puhelimen. Tiedosto voi palvella kumpaa tahansa tarkoitusta, ja sama teksti on molemmissa, joten sivu ei voi tietää, kumpaa tarkoitat. Sitä ei voi myöskään muuttaa myöhemmin elementin sisällä, joten valitse se, jota yleisösi tarvitsee.
Mitkä muut track-tyypit jätit pois?
Kolme: descriptions, joka selostaa kuvan katsojille, jotka eivät näe sitä; chapters, joka on navigointia eikä tekstitystä ja jolla on omat sivunsa tällä sivustolla; ja metadata, jota ei näytetä kenellekään. Millään kolmesta ei voi täyttää tekstitystiedoston sisällöllä, joten niiden tarjoaminen antaisi vain rakentaa elementin, joka ei näytä mitään. Tarjotut kaksi ovat ne kaksi, joita tekstitystiedosto voi todella palvella.
Muuttuuko tekstityksessäni jotain matkan varrella?
Teksti, ajoitukset ja tyylittely eivät muutu, ja WebVTT-tiedosto säilyttää omat kommentti-, tyyli- ja aluelohkonsa sekä alaotsikkokohtaiset asetuksensa. Muuttuu muoto: rivit kirjoitetaan uudelleen WebVTT-syntaksiin, jota soittimet lukevat, joten SRT-tiedoston pilkku kohdassa 00:00:01,000 muuttuu pisteeksi. Yksi tavu pudotetaan tarkoituksella — alussa oleva merkki, joka kertoo tiedoston olevan UTF-8, koska data-URI ilmoittaa merkistökoodauksen itse ja merkki näkyisi muuten kolmena irrallisena merkkinä alussa.