Download - 1.2 Časovo založené médiá
![Page 1: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/1.jpg)
1.2 Časovo založené médiáIng. Marián Pecko, PhD.
![Page 2: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/2.jpg)
1.2.1 Len audio a len video; vopred nahrané
Úroveň Single-A
![Page 3: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/3.jpg)
Postačujúce techniky
![Page 4: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/4.jpg)
Situácia A: Ak je obsah vopred nahrané len audio1.G158: Poskytnúť alternatívu pre časovo založené médiá pre len audio obsahposkytuje sa odkaz na prepis audia (obsahuje dôležité dialógy, zvuky v pozadí, ktoré sú súčasťou príbehu), ktorý nasleduje bezprostredne po len audio obsahu
Situácia B: ak je obsah vopred nahrané len video1.G159: Poskytnúť alternatívu pre časovo založené médiá pre len video obsahposkytuje sa odkaz na prepis videa (obsahuje všetky dôležité informácie, popis scén, udalostí, výrazov ktoré sú súčasťou prezentácie), ktorý nasleduje bezprostredne po len video obsahu
2.G166: Poskytnúť audio, ktoré popisuje dôležitý video obsah a popisuje ho ako takéaudio by malo byť v takom formáte, ktorý sa používa na internete (napr. MP3); odkaz na audio súbor sa poskytuje blízko videa
<a href="../video/marslanding.mp4"><img src="../images/spaceship.jpg" alt="Mars landing, video-only" width="193" height="255"></a><br><a href="Mars_landing_audio.mp3">Audio description of "Mars Landing"</a>
![Page 5: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/5.jpg)
Poradenské techniky
![Page 6: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/6.jpg)
po odvysielaní len audio prezentácie naživo poskytnúť jej prepis
poskytnúť odkaz na textovú informáciu, ktorá poskytuje porovnateľné informácie
![Page 7: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/7.jpg)
Zlyhania pre kritérium úspechu
![Page 8: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/8.jpg)
F30: Použitie textových alternatív, ktoré nie sú alternatívy F67: Poskytnutie dlhého popisu pre netextový obsah, ktorý
neslúži rovnakému účelu alebo nepredstavuje rovnakú informáciu
![Page 9: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/9.jpg)
1.2.2 Titulky; vopred nahrané
Úroveň Single-A
![Page 10: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/10.jpg)
Postačujúce techniky
![Page 11: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/11.jpg)
1. G93: Poskytnúť otvorené (vždy viditeľné) titulkyPOZOR!!!: hovoríme o captions, ktoré na rozdiel od subtitles
poskytujú okrem dialógov aj iné dôležité zvuky.
otvorené titulky - sú vždy zobrazené, nedajú sa vypnúť
2. G87: Použiť skryté titulky použitím ľahko dostupného mediálneho formátu, ktorý podporuje video prehrávač, ktorý podporuje skryté titulky
3. G87: Použiť skryté titulky použitím týchto techník1.SM11: Poskytovať titulky cez synchronizovaný textový streaming
v SMIL 1.0
2.SM12: Poskytovať titulky cez synchronizovaný textový streaming v SMIL 2.0
![Page 12: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/12.jpg)
Poradenské techniky
![Page 13: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/13.jpg)
poskytnite poznámku „V tomto klipe nie sú použité žiadne zvuky“ pre len video klipy
použite SMIL 1.0 pre poskytnutie titulkov pre všetky jazyky, ktoré sú použité vo všetkých zvukových stopách
použite SMIL 2.0 pre poskytnutie titulkov pre všetky jazyky, ktoré sú použité vo všetkých zvukových stopách
![Page 14: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/14.jpg)
Zlyhania pre kritérium úspechu
![Page 15: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/15.jpg)
F8: V titulkoch chýba dialóg alebo dôležitý zvukový efekt F75: Poskytnutie synchronizovaného média bez titulkov,
pokiaľ synchronizované médium poskytuje viac informácií ako je poskytovaných na stránke
F74: Nepopísanie textovej alternatívy synchronizovaného média ako alternatívy
![Page 16: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/16.jpg)
1.2.3 Audio popis alebo mediálna alternatíva; vopred nahrané
Úroveň Single-A
![Page 17: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/17.jpg)
Postačujúce techniky
![Page 18: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/18.jpg)
1. G69: Poskytovať alternatívu pre časovo založené médiá použitím jednej z nasledujúcich techník:
screenplay – dokument, ktorý zahrňuje dôležité dialógy, akcie, popisy pozadia, proste všetko čo je súčasťou príbehu
G58: Umiestnením odkazu na alternatívu pre časovo založené médiá bezprostredne po netextovom obsahu
<p><a href="http://www.example.com/movies/olympic_wrestling.mov">Olympic Wrestling movie</a>,
<a href="http://www.example.com/transcripts/olympic_wrestling_transcript.html>Olympic Wrestling collated Transcript</a></p>
odkazovanie sa na alternatívu pre časovo založené médiá použitím jednej z nasledujúcich techník H53: Použiť telo prvku object
2. G78: Poskytovať druhú, používateľom zvoliteľnú, zvukovú stopu, ktorá obsahuje audio popisy
hovorená verzia
![Page 19: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/19.jpg)
3. G173: Poskytovať verziu filmu s audio popismi použitím jedného z nasledujúcich:
terajšia technológia nedokáže zlučovať zvukové stopy, preto sa poskytuje druhá verzia filmu s originálnou zvukovou stopou zlúčenou s tou kde sú popisy
SM6: Poskytovať audio popis v SMIL 1.0 SM7: Poskytovať audio popis v SMIL 2.0 Použiť prehrávač, ktorý podporuje audio a video
4. G8: Poskytovať film s rozšírenými audio popismi použitím jedného z nasledujúcich:
rozšírený audio popis – ak chceme podať mnoho informácií pri veľmi krátkych pauzách medzi dialógmi; dočasne za pozastaví audio a video a počas pauzy sa poskytne dostatočný priestor na popis
Poskytuje sa druhá verzia filmu.
4.SM1: Pridať rozšírený audio popis v SMIL 1.0
5.SM2: Pridať rozšírený audio popis v SMIL 2.0
6.Použiť prehrávač, ktorý podporuje audio a video
![Page 20: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/20.jpg)
Poradenské techniky
![Page 21: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/21.jpg)
Poskytovať audio popis vo viacerých jazykoch v SMIL 1.0 Poskytovať audio popis vo viacerých jazykoch v SMIL 2.0
![Page 22: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/22.jpg)
1.2.4 Titulky; naživo
Úroveň Double-A
![Page 23: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/23.jpg)
Postačujúce techniky
![Page 24: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/24.jpg)
1. G9: Vytvoriť titulky pre synchronizované médium, ktoré je na naživo a
manuálne písanie – je lacné a jednoduché; nie je možné držať krok s väčšinou verbálnej komunikácie
profesionálny stenograf – môže byť drahý, môže pracovať vzdialene, extrémne rýchle, veľmi vysoká kvalita textu, výsledné dáta vyžadujú hardvérový alebo softvérový dekodér
systémy na rozoznávanie hlasu – môžu byť veľmi presné,, ale len ak rečník má naštudovaný systém a prostredie má málo šumu; nefunguje s neznámym alebo viacerými rečníkmi
titulkovací softvér pre internetové vysielanieTitulky môžu byť generované použitím služby prekladania textu real-timeG93: Poskytovať otvorené (vždy viditeľné) titulky2. G9: Vytvoriť titulky pre synchronizované médium, ktoré je na naživo
aG87: Poskytovať skryté titulky použitím ľubovoľného ľahko dostupného
mediálneho formátu, ktorý má video prehrávač, ktorý podporuje skryté titulky
3. G9: Vytvoriť titulky pre synchronizované médium, ktoré je na naživo a
G87: Poskytovať skryté titulky použitím jednej z nasledujúcich techník: SM11: Poskytovať titulky cez synchronizovaný textový streaming v SMIL 1.0 SM12: Poskytovať titulky cez synchronizovaný textový streaming v SMIL 2.0
![Page 25: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/25.jpg)
3. G173: Poskytovať verziu filmu s audio popismi použitím jedného z nasledujúcich:
terajšia technológia nedokáže zlučovať zvukové stopy, preto sa poskytuje druhá verzia filmu s originálnou zvukovou stopou zlúčenou s tou kde sú popisy
SM6: Poskytovať audio popis v SMIL 1.0 SM7: Poskytovať audio popis v SMIL 2.0 Použiť prehrávač, ktorý podporuje audio a video
4. G8: Poskytovať film s rozšírenými audio popismi použitím jedného z nasledujúcich:
rozšírený audio popis – ak chceme podať mnoho informácií pri veľmi krátkych pauzách medzi dialógmi; dočasne za pozastaví audio a video a počas pauzy sa poskytne dostatočný priestor na popis
Poskytuje sa druhá verzia filmu.
4.SM1: Pridať rozšírený audio popis v SMIL 1.0
5.SM2: Pridať rozšírený audio popis v SMIL 2.0
6.Použiť prehrávač, ktorý podporuje audio a video
![Page 26: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/26.jpg)
1.2.5 Audio popis; vopred nahrané
Úroveň Double-A
![Page 27: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/27.jpg)
Postačujúce techniky
![Page 28: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/28.jpg)
1. G78: Poskytovať druhú, používateľom zvoliteľnú, zvukovú stopu, ktorá obsahuje audio popisy
2. G173: Poskytovať verziu filmu s audio popismi použitím jedného z nasledujúcich:
SM6: Poskytovať audio popis v SMIL 1.0 SM7: Poskytovať audio popis v SMIL 2.0 Použiť prehrávač, ktorý podporuje audio a video
3. G8: Poskytovať film s rozšírenými audio popismi použitím jedného z nasledujúcich:
SM1: Pridať rozšírený audio popis v SMIL 1.0 SM2: Pridať rozšírený audio popis v SMIL 2.0 Použiť prehrávač, ktorý podporuje audio a video
![Page 29: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/29.jpg)
Poradenské techniky
![Page 30: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/30.jpg)
Poskytovať audio popis vo viacerých jazykoch v SMIL 1.0 Poskytovať audio popis vo viacerých jazykoch v SMIL 2.0 Poskytovať audio popis pre synchronizované médiá, ktoré sú
naživo
![Page 31: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/31.jpg)
1.2.6 Znaková reč; vopred nahrané
Úroveň Tripple-A
![Page 32: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/32.jpg)
Postačujúce techniky
![Page 33: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/33.jpg)
1. G54: Poskytovať vo video streame tlmočníka znakovej reči
2. G81: Poskytovať synchronizované video tlmočníka znakovej reči, ktoré môže byť zobrazované v inom náhľade alebo sa prekrýva v obraze v prehrávači použitím jednej z nasledujúcich techník:
SM13: Poskytovať výklad znakovej reči cez synchronizovaný video stream v SMIL 1.0
SM14: Poskytovať výklad znakovej reči cez synchronizovaný video stream v SMIL 2.0
![Page 34: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/34.jpg)
Poradenské techniky
![Page 35: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/35.jpg)
Použiť metadáta pre prepojenie alternatív znakovej reči videa pre umožnenie výberu znakovej reči
poskytnúť na stránke, v metadáta, URI ktoré odkazuje na rôzne preklady anglickej znakovej reči (ASL, SASL, BSL, Auslan, ISL, NZSL)
![Page 36: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/36.jpg)
1.2.7 Rozšírený audio popis; vopred nahrané
Úroveň Tripple-A
![Page 37: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/37.jpg)
Postačujúce techniky
![Page 38: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/38.jpg)
1. G8: Poskytovať film s rozšírenými audio popismi použitím jedného z nasledujúcich:
SM1: Pridať rozšírený audio popis v SMIL 1.0 SM2: Pridať rozšírený audio popis v SMIL 2.0 Použiť prehrávač, ktorý podporuje audio a video
![Page 39: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/39.jpg)
Poradenské techniky
![Page 40: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/40.jpg)
Poskytovať rozšírený audio popis vo viacerých jazykoch v SMIL 1.0
Poskytovať rozšírený audio popis vo viacerých jazykoch v SMIL 2.0
![Page 41: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/41.jpg)
1.2.8 Mediálna alternatíva; vopred nahrané
Úroveň Tripple-A
![Page 42: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/42.jpg)
Postačujúce techniky
![Page 43: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/43.jpg)
Situácia A: Ak obsah je vopred nahrané synchronizované médium:
1.G69: Poskytovať alternatívu pre časovo založené médiá použitím jednej z nasledujúcich techník:
G58: Umiestnením odkazu na alternatívu pre časovo založené médiá bezprostredne po netextovom obsahu
odkazovanie sa na alternatívu pre časovo založené médiá použitím jednej z nasledujúcich techník H53: Použiť telo prvku object
Situácia B: Ak je obsah vopred nahrané len videoG159: Poskytnúť alternatívu pre časovo založené médiá pre len video obsah
![Page 44: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/44.jpg)
Poradenské techniky
![Page 45: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/45.jpg)
H46: Používať noembed s embed Poskytnúť opravený scénar Pridanie detailov k audio popisu
![Page 46: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/46.jpg)
Zlyhania pre kritérium úspechu
![Page 47: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/47.jpg)
F74: Nepopísanie textovej alternatívy synchronizovaného média ako alternatívy
![Page 48: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/48.jpg)
1.2.9 Len audio; naživo
Úroveň Tripple-A
![Page 49: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/49.jpg)
Postačujúce techniky
![Page 50: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/50.jpg)
1. G151: Poskytnúť odkaz na textový prepis pripraveného vyhlásenia alebo scenára ak sa ide podľa scenára
2. G150: Poskytnúť alternatívy založené na texte pre len audio obsah naživo
3. G157: Začlenenie titulkovacej služby pre audio naživo do webovej stránky
![Page 51: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/51.jpg)
Poradenské techniky
![Page 52: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/52.jpg)
Použiť metadáta pre priradenie textových prepisov s len audio obsahom
poskytnúť, v metadáta, URI ktoré poukazuje na viaceré textové prepisy (anglický, francúzsky, nemecký) audio súboru
![Page 53: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/53.jpg)
Nové HTML5 prvky
![Page 54: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/54.jpg)
HTML <video> tag používa sa na prehrávanie videa alebo filmov a audio
súborov s titulkami obsah prvku sa zobrazuje iba v tých používateľských
agentoch, ktoré nepodporujú tento prvok atribúty
globálne crossorigin - povoľuje obrázkom zo stránok tretích strán, ktoré
povoľujú cross-origin prístup, aby sa použili s canvas; hodnoty - anonymous, use-credentials
poster – URL obrázku, ktorý sa zobrazuje pokým nie sú video dáta dostupné, alebo pokým sa nezačne prehrávať video
width, height – šírka a výška; používateľskí agenti predpokladajú ich použitie ako pomôcku pri renderovaní
<p><video src="tgif.vid" autoplay controls>alternatívny text</video></p>
![Page 55: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/55.jpg)
HTML < audio > tag predstavuje zvuk alebo audio stream obsah prvku sa zobrazuje iba v tých používateľských
agentoch, ktoré nepodporujú tento prvok atribúty
globálne crossorigin - povoľuje obrázkom zo stránok tretích strán, ktoré
povoľujú cross-origin prístup, aby sa použili s canvas; hodnoty - anonymous, use-credentials
<audio controls src="horse.ogg"></audio>
![Page 56: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/56.jpg)
Spoločné atribúty src – URL zdroja videa preload – ako si autor myslí, že má byť video nahrané pri
načítaní stránky; hodnoty: none – prehliadač má nahrať celé video keď sa nahráva stránka metadata – prehliadač má nahrať len metadáta keď sa nahráva stránka auto – prehliadač nemá nahrať video keď sa stránka nahráva
autoplay – bool hodnota; používateľský agent automaticky začne prehrávať zdroj
mediagroup – prepája viaceré mediálne prvky spolu aby vytvoril mediálny ovládač; hodnota je text; mediálne prvky s rovnakou hodnotou sú automaticky prepojené
loop – bool atribút; mediálny prvok sa pretočí na začiatok po dosiahnutí konca
muted – bool atribút; predvolený stav výstupu zvuku controls – bool atribút; naznačuje, že autor neposkytol
skriptovací ovládač a chce aby používateľký agent použil vlastnú sadu ovládačov
![Page 57: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/57.jpg)
HTML <source> tag umožňuje autorovi definovať viaceré alternatívy mediálnych
zdrojov pre mediálne prvky atribúty
globálne src – URL mediálneho zdroja; musí byť daný type – typ mediálneho zdroja, MIME typ; dodatočný parameter
codecs definuje typ kódovania media – typ média, na ktorom sa má video prehrať
<video controls autoplay>
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
...
</video>
![Page 58: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/58.jpg)
HTML <track> tag umožňuje autorovi explicitne definovať externé
časované textové stopy pre mediálne prvky atribúty
globálne kind – predvolene je subtitles
subtitles – preklad alebo prepis dialógu, keď je zvuk zle zrozumiteľný captions – preklad alebo prepis dialógu, zvukové efekty ai. keď nie je
zvuk description – textový popis častí videa; prezentuje sa ako audio chapters – názvy kapitol metadata – stopy pre použitie zo skriptu
src – URL textových dát; povinný srclang – jazyk textových dát; povinný ak atribút kind má
hodnotu subtitiles label – názov stopy zobrazujúci sa používateľom default – definuje predvolenú stopu; musí byť iba jedna
![Page 59: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/59.jpg)
HTML <track> tag<video src="brave.webm"> <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English"> <track kind="captions" src="brave.en.hoh.vtt" srclang="en" label="English for the Hard of Hearing"> <track kind="subtitles" src="brave.fr.vtt" srclang="fr" lang="fr" label="Français"> <track kind="subtitles" src="brave.de.vtt" srclang="de" lang="de" label="Deutsch"></video>
![Page 60: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/60.jpg)
Video a audio formáty
![Page 61: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/61.jpg)
formát Chrome Firefox Opera IE10
Video
MPEG-4 nie nie nie nie
H.264 áno nie nie áno
Ogg Theora áno áno áno nie
WebM áno áno áno nie
Audio
PCM audio áno áno áno nie
AAC áno nie nie áno
MP3 áno nie nie áno
Ogg Vorbis áno áno áno nie
Ogg Opus nie áno nie nie
WebM áno áno áno nie
Aktuálna podpora formátov
![Page 62: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/62.jpg)
Odporúčania1. aby to fungovalo
HTML5, Flash, Mobil: MP4/H.264, Baseline profile, 480×360 alebo 640×480
HTML5: WebM alebo Ogg2. pre zvýšenie podpory
HTML5, Flash: MP4/H.264, High profile HTML5: WebM HTML5: Ogg Mobil: MP4/H.264, Baseline profile, 480×360 alebo 640×480
3. podpora pre všetko HTML5, Flash: MP4/H.264, High profile HTML5: WebM HTML5: Ogg Mobil: MP4/H.264, Baseline profile, 480×360, pre širokú kompatibilitu Mobil: MP4/H.264, Main profile, 1280×720, pre novšie iOS
zariadenia (iPhone 4, iPad, Apple TV) Mobil: 3GP/MPEG4, 320×240 a/alebo 177×144, pre nie-
smartphones*
![Page 63: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/63.jpg)
Titulky
![Page 64: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/64.jpg)
Formát WebVTT – Web Video Text Tracks
WEBVTT
00:11.000 --> 00:13.000
<v Roger Bingham>We are in New York City
00:13.000 --> 00:16.000
<v Roger Bingham>We're actually at the Lucern Hotel, just down the street
00:16.000 --> 00:18.000
<v Roger Bingham>from the American Museum of Natural History
![Page 65: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/65.jpg)
Viacej riadkov používateľský agenti vkladajú zalamovanie riadkov aby sa titulky
zmestili do šírky titulkov autorom sa odporúča písať všetko do jedného riadku, pokým
zalomenie riadku nie je nevyhnutné
WEBVTT
00:01.000 --> 00:04.000Never drink liquid nitrogen.
00:05.000 --> 00:09.000— It will perforate your stomach.— You could die.
00:10.000 --> 00:14.000The Organisation for Sample Public Service Announcements accepts no
liability for the content of this advertisement, or for the consequences of any actions taken on the basis of the information provided.
![Page 66: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/66.jpg)
Komentáre komentár končí na prvom prázdnom riadku nesmie ako podreťazec obsahovať „-->“ zloženie
1. reťazec „NOTE“2. voliteľne
1. medzera alebo tabulátor2. WebVTT line terminator
WEBVTT
00:01.000 --> 00:04.000Never drink liquid nitrogen.
NOTEI'm not sure the timing is right on the following cue.
00:05.000 --> 00:09.000— It will perforate your stomach.— You could die.
![Page 67: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/67.jpg)
Cue identifikátor používa sa pri štylizovaní titulkov nesmie obsahovať podreťazec „-->“
WEBVTT
00:00.000 --> 00:02.000
That's an, an, that's an L!
transcription-credit
00:04.000 --> 00:05.000
Transcribed by Celestials™
::cue(#transcription-credit) { color: red }
![Page 68: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/68.jpg)
Kapitoly
WEBVTT
Chapter 1
00:00:01.000 --> 00:00:10.000>
Introduction to HTML5
![Page 69: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/69.jpg)
Voice spans nemusia byť uzatvorené pokiaľ pokrývajú celý text prvý span má dve triedy „first“ a „loud“
WEBVTT
00:00.000 --> 00:02.000<v.first.loud Esme>It's a blue apple tree!
00:02.000 --> 00:04.000<v Mary>No way!
00:04.000 --> 00:06.000<v Esme>Hee!</v> <i>laughter</i>
00:06.000 --> 00:08.000<v.loud Mary>That's awesome!
::cue(v[voice="Esme"]) { color: blue }::cue(v[voice="Mary"]) { color: green }::cue(i) { font-style: italic }::cue(.loud) { font-size: 2em }
![Page 70: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/70.jpg)
Syntax súbor má príponu „vtt“, je v UTF-8 a má MIME type text/vtt
Telo súboru:
1.voliteľné - BOM znak
2.reťazec „WEBVTT“
3.voliteľné – medzera, tabulátor
4.dva alebo viac WebVTT line terminators
5.žiaden alebo viac WebVTT cues a WebVTT komentáre oddelené od seba dvoma alebo viacerými WebVTT line terminators
6.žiaden alebo viac WebVTT line terminators
![Page 71: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/71.jpg)
WebVTT cue1. voliteľné – WebVTT cue identifikátor naslovaný WebVTT
line terminator
2. WebVTT cue časovania
3. voliteľné – jedna alebo viac medzier, tabulátorov nasledované WebVTT cue nastaveniami
4. WeBVTT line terminator
5. cue payload: buď WebVTT cue text, WebVTT text názvu kapitoly alebo WebVTT metadáta text, ale nesmie obsahovať ako podreťazec „-->“(WebVTT text názvu kapitoly je súbor WebVTT cue textu, ktorý je súbor WebVTT metadáta textu)
![Page 72: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/72.jpg)
WebVTT line terminator1. CARRIAGE RETURN (CR) a LINE FEED (LF)
1. Alt 13, Alt 013, Alt +000D / Alt 10, Alt 010, Alt +000A
2. /
2. LINE FEED (LF)1. Alt 10, Alt 010, Alt +000A
2.
3. CARRIAGE RETURN (CR)1. Alt 13, Alt 013, Alt +000D
2.
![Page 73: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/73.jpg)
WebVTT cue časovanie súčasť WebVTT obsahuje
1. WebVTT timestamp predstavujúci počiatočný čas; musí byť rovný alebo väčší ako všetky predchádzajúce timestamp
2. jeden alebo viac medzier alebo tabulátorov3. reťazec „-->“4. jeden alebo viac medzier alebo tabulátorov5. WebVTT timestamp predstavujúci čas ukončenia; musí byť väčší ako počiatočný čas
WEBVTT
00:00.000 --> 01:24.000Introduction
00:00.000 --> 00:44.000Topics
00:44.000 --> 01:19.000Presenters
01:24.000 --> 05:00.000Scrolling Effects
01:35.000 --> 03:00.000Achim's Demo
03:00.000 --> 05:00.000Timeline Panel
![Page 74: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/74.jpg)
WebVTT timestampZloženie
1.voliteľné (povinné ak hodina nie je nulová)1. dve alebo viac číslic predstavujúce hodinu
2. znak „:“
2.dve číslice predstavujúce minútu v rozsahu 0 – 59
3.znak „:“
4.dve číslice predstavujúce sekundu v rozsahu 0 – 59
5.znak „.“
6.tri číslice predstavujúce tisíciny sekundy
![Page 75: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/75.jpg)
WebVTT cue nastavenia skladá sa zo zložiek oddelených medzerou alebo
tabulátorom každá zložka môže byť uvedená len raz
1.nastavenia písania textu1. reťazec „vertical“ a znak „:“
2. jeden z reťazcov: „rl“, „lr“
2.nastavenia pozície riadku1. reťazec „line“ a znak „:“
2. buď1. ako percento od horného okraja obrazu
2. ako číslo riadku; kladná hodnota sa počíta od horného okraja (horný okraj je 0), záporná od dolného (dolný okraj je -1)
![Page 76: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/76.jpg)
WebVTT cue nastavenia3. nastavenia pozície textu
1. reťazec „position“ a znak „:“
2. percento – mení sa pozícia v ortogonálnom smere vzhľadom na pozíciu riadku (tj. pre písanie v smere lr je to od ľavého okraja)
4. nastavenie veľkosti1. reťazec „size“ a znak „:“
2. percento – určuje šírku titulkov; udáva sa ako percento šírky obrazu
5. nastavenie zarovnania1. reťazec „align“ a znak „:“
2. jeden z reťazcov: „start“, „middle“, „end“, „left“, „right“
![Page 77: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/77.jpg)
WebVTT cue komponenty class – c italic – i bold – b underline – u ruby – ruby voice – v language – lang
& – & < – < > – > nedeliteľná medzera –
![Page 78: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/78.jpg)
CSS jednotky
vw, vh
vlastnosti color opacity visibility text-decoration text-outline text-shadow background outline font line-height white-space
![Page 79: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/79.jpg)
Nástroje konverzia video formátov
Video Download Capture http://www.apowersoft.com/video-download-capture.html
titulkovací softvér AHD Subtitles Maker http://ahd-subtitles-maker.webnode.com/
WebVTT validátor http://quuz.org/webvtt/
![Page 80: 1.2 Časovo založené médiá](https://reader035.vdocuments.net/reader035/viewer/2022062314/56814944550346895db68e3a/html5/thumbnails/80.jpg)
Ďakujem za pozornosť