Nilalaman
- Kung nasaan tayo ngayon
- Multimedia subtitling at captioning
- WebVTT
- Video na buong-screen
- Pagsasabay sa mga elemento ng media
- Pag-access sa camera at mikropono
- WebRTC
Ang artikulong ito ay unang lumitaw sa isyu ng 224 ng .net magazine - ang pinakamabentang magazine sa buong mundo para sa mga web designer at developer.
Nagdadala ang HTML5 ng katutubong multimedia sa mga browser. Sa unang panahon, ang video at audio ay ipinasa sa mga third-party na plug-in (na maaaring hindi magamit para sa bawat aparato o operating system). Ang komunikasyon sa pagitan ng isang browser at isang plug-in ay limitado at samakatuwid ang multimedia ay isang itim na kahon.
Pagkatapos ay dumating ang HTML5. Sinusuportahan ng lahat ng mga pangunahing browser ang katutubong video at audio (kasama ang Internet Explorer), kahit na kailangang i-double encode ang iyong media dahil sinusuportahan lamang ng IE at Safari ang mga naka-encumber na mga codec.
Biglang, ang video ay maaaring istilo ng CSS - maaari mong i-overlay ang mga semi-transparent na video sa bawat isa, magtakda ng mga hangganan at mga imahe sa background, paikutin ang mga ito sa hover sa mga pagbabago at pagbabago at lahat ng iba pang mga kababalaghan.
Kung nabasa mo ang artikulong isinulat ko kay Vadim Makeev, malalaman mo rin na ang parehong audio at video ay may mga simpleng API na magagamit mo upang makontrol ang pag-playback mula sa JavaScript. Sa ilang simpleng JavaScript at CSS na kumplikado o kasing simple ng kinakailangan ng iyong hitsura, maaari kang bumuo ng iyong sariling media player.
Kung nasaan tayo ngayon
Na, kung gayon, ang katutubong multimedia ay mukhang medyo groovy. Hindi ito ganap na mature, syempre; ang mga browser ay naging mga manlalaro ng media nang mas mababa sa dalawang taon, habang ang mga tagabuo ng mga programa ng desktop media player ay ginawang perpekto ang kanilang mga programa hanggang sa 15 taon.
Marami ang napansin na ang karamihan sa mga browser ay may lubos na pag-playback ng audio. Kadalasang sinasabi ng mga developer ng laro na ang natitirang paggamit ng Flash para sa kanila ay para sa tunog, dahil ang ilang mga browser ay maaaring tumagal ng hanggang dalawang segundo upang ma-trigger ang isang HTML5 audio file. Si Patrick Lauke ay nagdodokumento ng pag-hack ng isang looping audio na walang kaunting pagkaantala bago mag-loop.
Naitala ni Remy Sharp kung paano niya nakuha ang mga pagkukulang ng iOS sa isang diskarteng tinawag niyang Audio Sprites. Saanman sa lupain ng iOS, dapat basahin ang mga isyu sa video na HTML5 sa iPad at kung paano malutas ang mga ito at Hindi nalutas ang mga isyu sa video na HTML5 sa iOS.
Siyempre, ito ang mga detalye sa pagpapatupad sa halip na mga problema sa pagtukoy, kaya't sa pagkahinog ng mga platform, makikitang mawala ang marami sa mga isyung ito.
Kaya ngayon alam natin kung nasaan tayo, tingnan natin kung ano ang susunod.
Multimedia subtitling at captioning
Tulad ng maraming at mas maraming nilalaman sa web ay nasa video o audio, maglaan ng pag-iisip para sa mga hindi maririnig ang soundtrack, o kung kanino ang Ingles ay hindi isang katutubong wika kaya nais na basahin pati na rin makinig, o para sa mga nais na basahin ang mga subtitle sa kanilang sariling wika.
Malapit na sa mga browser na malapit sa iyo ay mga subtitle at caption, sa pamamagitan ng lakas ng HTML5 subaybayan> elemento, na nagsi-synchronize ng isang file ng teksto at impormasyon sa tiyempo sa isang file ng media, ipinapakita ang teksto sa tamang oras. Ang makapangyarihang sangkap na ito ay nabubuhay bilang isang anak ng video> o audio> elemento, at tumuturo sa isang subtitle file.
Tingnan natin ang ilan sa mga katangian nito:
subaybayan ang src = subtitles.vtt kind = subtitles srclang = en label = "English">
Ang katangian ng src ay tumuturo sa mga panlabas na naka-time na mga track ng teksto. Sinasabi ng katangiang mabait sa browser kung ang mga ito ay mga subtitle (ang diyalogo ay na-transcribe at posibleng isinalin dahil kung hindi hindi ito mauunawaan), mga caption (salin o salin ng dayalogo, mga sound effects, mga pahiwatig ng musikal at iba pang nauugnay na impormasyon sa audio na angkop para sa kung kailan ang tunog ay hindi magagamit o hindi malinaw na maririnig), mga paglalarawan (paglalarawan sa tekstuwal ng bahagi ng video ng mapagkukunan ng media, na inilaan para sa audio synthesis kapag ang visual na sangkap ay natatakpan, hindi magagamit, o hindi magagamit, halimbawa, dahil ang gumagamit ay nakikipag-ugnay sa application nang walang isang screen habang nagmamaneho, o dahil bulag ang gumagamit), mga kabanata o metadata. Ang default ay mga subtitle.
Ang srclang Sinasabi ng katangiang sa browser kung anong wika ang nasa mga file ng teksto at pinapayagan kang maiugnay ang higit sa isang hanay sa isang video o audio - upang makapag-alok ka ng mga subtitle sa maraming wika. Ang label ay opsyonal at isang pamagat na nababasa ng gumagamit para sa track.
mga kontrol sa video> pinagmulan src = pelikula.mp4 uri = video / mp4> pinagmulan src = pelikula.webm type = video / webm> uri ng track = subtitles srclang = en src = subtitles-en.vtt> uri ng track = subtitle srclang = de src = subtitles-de.vtt label = "German">! - ibalik ang nilalaman, hal. isang Flash na pelikula o embed code / video sa YouTube>
Ang spec ay hindi gumagawa ng mga kinakailangan ng mga browser para sa kung paano nila ipinapahayag ang pagkakaroon ng inorasang teksto, at wala pang browser sa pagpapadala ang may suporta para dito, ngunit maaari kaming mag-eksperimento gamit ang isang Polyfill.
Para sa mabilis na prototyping, nais kong gumamit ng Playr, isang magaan na script mula kay Julien Villetorte. Magagamit ito sa Github. Grab lang ang mga imahe na bumubuo sa Playr UI, idagdag playr.js at playr.css sa pinuno ng iyong pahina, magdagdag ng pangalan ng klase playr_video sa iyong video tag at magre-render ang iyong pahina ng isang seksing balat sa Playr at may kakayahang pumili sa pagitan ng iyong mga subtitle.
Tandaan na ang UI ay ginawa ng Polyfill at hindi pa naka-built in sa anumang browser - ngunit malapit na. Ginagawa ito ng Opera, Microsoft at Google, at malamang na mag-aalok ang mga browser ng katulad na UI at pagpapaandar.
Ang subaybayan> hindi ipinapalagay ng elemento ang anumang partikular na format para sa nag-time na teksto, alinman. Sa kasong ito, ito ay isang webVTT file, ngunit subaybayan>, gaya ng img>, video> at audio> ay format agnostic. Susuportahan ng lahat ng mga browser ang bagong format ng WebVTT, at inihayag ng Microsoft na susuportahan din nito ang isang mas matandang format na tinawag na TTML.
WebVTT
Ang WebVTT ay isang bagong tatak na format ng teksto. Ang web ay littered sa iba pang mga format - hindi bababa sa 50 - kaya bakit lumikha ng bago? Dahil kailangan namin ng isang simpleng format.
Napakadali ng may-akda ng WebVTT. Ito ay isang mahalagang punto: kung napakahirap, hindi mag-aalala ang mga may-akda - at walang halaga ng suporta sa browser para sa mga bagong elemento at API na gagawing naa-access ang nilalaman ng multimedia kung walang mga naka-subtitle na video doon. Sa pinakasimpleng ito, ganito ang hitsura ng WebVTT:
WEBVTT
00:01.000 --> 00:02.000
Kamusta
00:03.000 --> 00:05.000
Mundo
Ito ay simpleng isang UTF-8 na naka-encode na text file, na may WEBVTT sa itaas. Ang mga oras ay ipinahiwatig bilang mga offset mula sa simula ng media. Kaya't ang "Hello" ay ipapakita mula sa isang segundo sa video hanggang sa dalawang segundo mula sa pagsisimula ng video (samakatuwid, ipinapakita para sa isang segundong tagal). Mawawala ang mga subtitle hanggang tatlong segundo mula sa simula, sa oras na ipapakita ang "Daigdig".
Hindi ito darating mas simple. Siyempre, mas marami kang magagawa kung nais mo. Halimbawa, maaari mong baguhin ang posisyon ng subtitle (upang hindi ka makakuha ng puting teksto sa isang puting bahagi ng frame, halimbawa).
00: 03.000 -> 00: 05.000 L: -85%
Inililipat nito ang subtitle na 85 porsyento ng taas ng media na "pataas" mula sa default na posisyon nito sa ilalim ng video.
Maaari mong baguhin ang laki ng teksto, halimbawa S: 150% pinatataas ang laki sa 150 porsyento ng default. Posibleng magkaroon ng mga subtitle na palabas nang paitaas (halimbawa, may mga lyrics ng karaoke kung saan lilitaw ang linya ng isang salita nang paisa-isa, ngunit ang dating salita ay hindi mawawala kapag may ipinakita na bago). Maaari mong istilo ang iba't ibang mga salita ng mga nagsasalita na may iba't ibang kulay, at may pangunahing suporta para sa pag-istilo ng iba't ibang mga salita na may iba't ibang kulay. Para sa karagdagang impormasyon bisitahin ang delphiki.com/webvtt/#cue-settings.
Higit na mahalaga kaysa sa mga pagpipiliang pangkakanyahan ay ang mga pagpipilian sa gawing gawing gawing internationalisasyon na magagamit. Ang spec ng webVTT ay nagtatayo sa kanan-sa-kaliwang suporta para sa mga wika tulad ng Arabe at Hebrew, patayong suporta para sa mga wika tulad ng Intsik at ang kakayahang magdagdag ng mga anotasyon ng Ruby bilang mga pahiwatig ng pagbigkas para sa Tsino, Hapon at Koreano.
Kung nais mong mag-eksperimento sa webVTT, kunin ang Playr at magsulat. Ang Anne van Kesteren ng Opera ay nagsulat ng isang live na webVTT validator upang subukan ang iyong trabaho.
Video na buong-screen
Lahat ay may gusto ng full-screen na video. Lahat maliban sa mga HTML5 specifier, iyon ay, na hindi pinapayagan ito sa mahabang panahon. Pinangarap ng WebKit ang sarili nitong pamamaraan sa JavaScript na tinawag WebkitEnterFullscreen (), at ipinatupad ang API sa isang paraan na maaari lamang ma-trigger kung pinasimulan ng gumagamit ang pagkilos - tulad ng mga pop-up windows, na hindi malilikha maliban kung ang gumagamit ay gumawa ng isang aksyon tulad ng isang pag-click.
Noong Mayo 2011, inihayag ng WebKit na ipapatupad nito ang sariling lasa ng Mozilla ng isang full-screen API. Pinapayagan ng API na ito ang anumang elemento na pumunta sa full-screen (hindi lamang video>) - Baka gusto mo
full-screen canvas> mga laro o video widget na naka-embed sa isang pahina sa pamamagitan ng an iframe>. Maaari ring mag-opt in ang mga script sa pagkakaroon ng pag-input ng alphanumeric keyboard habang naka-view ng buong screen, na nangangahulugang maaari kang lumikha ng iyong super spiffing platform game gamit ang canvas> API at maaari itong magpatakbo ng full-screen na may buong suporta sa keyboard.
Tulad ng kagustuhan ng Opera sa pamamaraang ito, dapat din nating makita ang isang bagay na papalapit sa interoperability. Hanggang sa oras na iyon, maaari naming magpatuloy sa pekeng full-screen sa pamamagitan ng pagpunta sa full-window, pagtatakda sa mga sukat ng video na katumbas ng laki ng window.
Pagsasabay sa mga elemento ng media
Ang kakayahang i-synchronize ang mga elemento ng media ay tinutukoy pa rin, kaya't mas malayo ito sa pagpapatupad kaysa sa mga naka-synchronize na caption at subtitle. Papayagan nitong maiugnay ang maraming nauugnay na elemento ng media (video, audio, o pinaghalong pareho).
Mayroong dalawang pangunahing mga kaso ng paggamit para dito. Pag-isipan ang isang site na nagpapakita ng mga video ng mga kaganapan sa palakasan: maaaring maraming elemento ng video, bawat isa mula sa ibang anggulo ng camera - halimbawa, isa sa bawat layunin, isa sa hangin at isang pagsubaybay sa bola. Ang isang site na nagpapakita ng isang konsyerto ay maaaring magkaroon ng isang camera sa bass gitara, isa sa gitara, isa sa Peruvian noseflute. Ang paglipat ng seek bar, o pagbabago ng rate ng pag-playback upang mabagal ang paggalaw, sa isang video ay dapat makaapekto sa bawat isa pang mga video.
Ang isa pang mahalagang kaso ng paggamit ay ang kakayahang mai-access. Ang subaybayan> Pinapayagan kami ng elemento na magsabay sa teksto ng isang video; ang kakayahang magsabay ng mga elemento ng media ay nagpapahintulot sa amin na mag-synchronize ng isa pang video (halimbawa, isang pelikula ng isang taong pumirma sa mga salitang binigkas sa pangunahing video) o pagsabay sa isang audio track na naglalarawan sa aksyon sa isang video habang nag-break ang diyalogo.
Mayroong isang buong Controller API na tinukoy, ngunit ang pinakamadaling paraan upang mai-synchronize ang mga elemento ng media ay magiging deklarado, gamit ang mediagroup na katangian sa video> o audio>. Lahat ng mga may parehong halaga para sa mediagroup ay mai-synchronize:
video mediagroup = "jedward" src = "bass-gitar.webm"> ../ video> video mediagroup = "jedward" src = "lead-gitar.webm"> ../ video> video mediagroup = "jedward" src = "idiot-1.webm"> ../ video> video mediagroup = "jedward" src = "idiot-2.webm"> ../ video>
Ang tipak ng markup na ito ay sumasabay sa apat na mga camera sa iba't ibang mga musikero sa isang Jedward concert. Ang sumusunod ay sumasabay sa paglalarawan ng audio sa tanyag na pelikulang Mankini Magic:
video mediagroup = "describes-film" src = "mankini-magic.webm"> ../ video> audio mediagroup = "describes-film" src = "describes.ogg"> ../ audio>
Tinutukoy pa rin ito, kaya't walang suporta sa browser at (sa pagkakaalam ko) walang mga polyfill.
Pag-access sa camera at mikropono
Mayroong ilang natitirang paggamit para sa mga plug-in na ang HTML5 hanggang ngayon ay hindi pa nagawang umagaw. Ang nilalamang nagpoprotekta ng kopya sa DRM ay iisa (tingnan ang Q & As sa itaas at overleaf para sa higit pa doon). Ang isa pa ay adaptive streaming - binabago ang rate ng bit atbp alinsunod sa mga kundisyon ng network, kahit na pinagtatrabahuhan iyon.
Ayon sa kaugalian ng teritoryo ng Flash plug-in, idinagdag ngayon ng HTML5 ang pasilidad upang kumonekta sa camera at mikropono ng isang aparato. Dating kilala bilang HTML5 aparato>, ang pagpapaandar na ito ay nakabalot na ngayon sa isang API na tinawag getUserMedia. Upang sabihin sa aparato kung anong uri ng media ang nais naming makuha, ipinapasa namin ang audio o video bilang mga argumento. Dahil maraming mga aparato ang may nakaharap na camera, na kumukuha ng imahe ng gumagamit, at likurang kamera, maaari kaming pumasa sa gumagamit o kapaligiran ng token.
Una, nagtatampok kami ng tuklasin:
kung (navigator.getUserMedia) {navigator.getUserMedia ('audio, video user', tagumpayCallback, errorCallback);
Kapag mayroon kaming mga stream, maaari nating gamitin ang mga ito ayon sa kailangan natin. Dito, susubukan lamang namin ang kopya ng stream sa pahina sa pamamagitan ng pag-hook up ng stream sa pinagmulan ng isang elemento ng video:
var video = document.getE ElementByTagName (‘video’) [0] ... function successCallback (stream) {video.src = stream; }
Kapag mayroon na kami nito, simpleng kopyahin ang video sa isang elemento ng canvas gamit ang drawImage upang makuha ang kasalukuyang frame ng video, at i-redraw ito tuwing 67milliseconds (kaya humigit-kumulang na 15 mga frame bawat segundo). Kapag nasa canvas na ito, maaari mong ma-access ang mga pixel sa pamamagitan ng getImageData.
Sa isang halimbawa ni Richard Tibbett ng Opera ang canvas ay na-access sa pamamagitan ng JavaScript upang maisagawa ang pagkilala sa mukha - sa real time! - at, sa sandaling matagpuan ang isang mukha, upang gumuhit ng isang magic HTML5 na bigote sa tamang lugar.
getUserMedia ay suportado sa Opera 12, Opera Mobile 12 at Canary builds
ng Chrome. Marami pang mga halimbawa ng getUserMedia ang mahahanap dito.
Malinaw na, ang pagbibigay ng mga website ng pag-access sa iyong webcam ay maaaring lumikha ng mga makabuluhang problema sa privacy, kaya't ang mga gumagamit ay kailangang mag-opt-in, tulad ng gagawin nila sa geolocation. Ngunit iyon ay isang pag-aalala sa UI sa halip na isang teknikal na problema.
Siyempre, posible lamang na ang mga tagadisenyo ng getUserMedia Ang API ay may iba pang mga naisip, bukod sa pagguhit ng bigote. Maaari itong magamit para sa mga mambabasa na batay sa browser ng QR / bar code. O, mas kapanapanabik, pinalaking katotohanan. Ang HTML5 Working Group ay kasalukuyang tumutukoy ng isang peer-to-peer API na magpapahintulot sa iyo na i-hook up ang iyong camera at mikropono sa video> at audio> mga elemento ng browser ng ibang tao, na ginagawang posible na gumawa ng video conferencing.
WebRTC
Noong Mayo 2011, inihayag ng Google ang WebRTC, isang bukas na teknolohiya para sa boses at video sa web, batay sa mga pagtutukoy ng HTML5. Ang RTC ay nangangahulugang "real-time na komunikasyon", at ito ay video-conferencing sa browser. Nakabitin nito ang iyong camera at mikropono sa isang elemento ng video> sa isang web page sa browser ng iyong kaibigan (at kabaliktaran) sa HTML5 PeerConnection API.
Gumagamit ang WebRTC ng VP8 (ang video codec sa WebM) at dalawang audio codec na na-optimize para sa pagsasalita na may ingay at pagkansela ng echo, na tinatawag na iLBC, isang makitid na boses na codec, at iSAC, isang bandwidth-adaptive wideband codec. Tulad ng sinabi ng website ng proyekto, "Inaasahan naming makakakita ng suporta sa WebRTC sa Firefox, Opera, at Chrome sa lalong madaling panahon!"
Tulad ng nakikita mo, ang suporta sa multimedia na HTML5 ay malapit nang mapayaman. Tulad ng dati sa HTML5, ang mga pagpapatupad ay kailangang abutin ang detalye - at ang mga panoorin ay kailangang tapusin din - ngunit ang hinaharap ay mukhang kapanapanabik talaga.
Para sa higit pa sa hinaharap ng video, tingnan ang aming Q & As kasama sina John Foliot at Silvia Pfeiffer
