Ábhar
- An áit a bhfuilimid anois
- Fotheidealú agus fotheidealú ilmheán
- WebVTT
- Físeán lánscáileáin
- Eilimintí na meán a shioncronú
- Rochtain ar cheamara agus ar mhicreafón
- WebRTC
Foilsíodh an t-alt seo den chéad uair in eagrán 224 den iris .net - an iris is mó díol ar domhan do dhearthóirí gréasáin agus d’fhorbróirí.
Tugann HTML5 ilmheán dúchasach do bhrabhsálaithe. I laethanta tosaigh, tugadh físeán agus fuaim do plug-ins tríú páirtí (nach bhféadfadh a bheith ar fáil do gach feiste nó córas oibriúcháin). Tá cumarsáid idir brabhsálaí agus breiseán teoranta agus dá bhrí sin bosca dubh a bhí san ilmheán go mór.
Ansin tháinig HTML5. Tacaíonn na brabhsálaithe móra go léir le físeán agus fuaim dhúchasach (Internet Explorer san áireamh), cé gur gá do na meáin a ionchódú faoi dhó toisc nach dtacaíonn IE agus Safari ach codecs rí-ríofa.
Go tobann, is féidir físeán a stíleáil le CSS - is féidir leat físeáin leath-trédhearcacha a fhorleagan thar a chéile, teorainneacha agus íomhánna cúlra a shocrú, iad a rothlú ar sciorradh le haistrithe agus claochluithe agus gach cineál iontais eile.
Má léann tú an t-alt a scríobh mé le Vadim Makeev, beidh a fhios agat freisin go bhfuil APIanna simplí ag an bhfuaim agus ag an bhfíseán is féidir leat a úsáid chun athsheinm ó JavaScript a rialú. Le roinnt JavaScript agus CSS simplí chomh casta nó chomh simplí agus a éilíonn do chuma, is féidir leat do sheinnteoir meán féin a thógáil.
An áit a bhfuilimid anois
Cheana féin, ansin, tá ilmheán dúchais ag breathnú go deas groovy. Níl sé lánfhásta, ar ndóigh; Tá brabhsálaithe ina seinnteoirí meán le níos lú ná dhá bhliain, agus tá forbróirí clár seinnteoirí meán deisce ag foirfiú a gcuid clár le suas le 15 bliana.
Thug a lán daoine faoi deara go bhfuil athsheinm fuaime laggy ag formhór na mbrabhsálaithe. Is minic a deir forbróirí cluichí gurb é an úsáid atá fágtha as Flash dóibh ná fuaim, mar is féidir le roinnt brabhsálaithe suas le dhá shoicind a thógáil chun comhad fuaime HTML5 a spreagadh. Doiciméadaíonn Patrick Lauke hacking fuaime lúbtha nach bhfuil moill bheag air sula ndéantar é a lúbadh.
Tá doiciméadaithe ag Remy Sharp faoin gcaoi ar éirigh leis easnaimh iOS a shárú le teicníc ar a dtugtar Audio Sprites. Áit eile i dtalamh iOS, ní mór léamh-léamh a dhéanamh ar shaincheisteanna físe HTML5 ar an iPad agus conas iad a réiteach agus saincheisteanna físe HTML5 gan Réiteach ar iOS.
Ar ndóigh, sonraí cur chun feidhme iad seo seachas fadhbanna sonraíochta, mar sin de réir mar a aibíonn na hardáin, feicfimid go leor de na saincheisteanna seo imithe.
Mar sin anois go bhfuil a fhios againn cá bhfuil muid, déanaimis féachaint ar an chéad rud eile atá le teacht.
Fotheidealú agus fotheidealú ilmheán
De réir mar a bhíonn níos mó agus níos mó ábhar ar an ngréasán i bhfíseán nó i bhfuaim, smaoinigh ar dhaoine nach gcloiseann an fuaimrian, nó nach teanga dhúchais an Béarla dóibh ar mhaith leo léamh chomh maith le héisteacht, nó dóibh siúd ar mhaith leo Ba mhaith leo fotheidil a léamh ina dteanga féin.
Ag teacht go luath chuig brabhsálaithe in aice leat tá fotheidil agus fotheidil, trí chumhacht an HTML5 rian> eilimint, a shioncronaíonn comhad téacs agus faisnéis uainiúcháin le comhad meán, ag taispeáint an téacs ag an am ceart. Maireann an ghné chumhachtach seo mar pháiste den fhíseán> nó fuaime> eilimint, agus díríonn sé ar chomhad fotheidil.
Féachaimis ar chuid dá tréithe:
rian src = fotheidil.vtt cineál = fotheidil srclang = en label = "Béarla">
Díríonn an tréith src ar na rianta seachtracha téacs uainithe. Insíonn an tréith chomhchineáil don bhrabhsálaí más fotheidil iad seo (déantar an t-idirphlé a thras-scríobh agus a aistriú b’fhéidir toisc nach dtuigfí a mhalairt), ceannteidil (trascríobh nó aistriúchán ar an idirphlé, maisíochtaí fuaime, leideanna ceoil agus faisnéis fuaime ábhartha eile atá oiriúnach do cathain níl fuaim ar fáil nó níl sé inchloiste go soiléir), tuairiscí (tuairiscí téacsúla ar an gcomhpháirt físe den acmhainn meán, atá beartaithe le haghaidh sintéis fuaime nuair a bhíonn an chomhpháirt amhairc doiléir, gan a bheith ar fáil, nó nach bhfuil inúsáidte, mar shampla, toisc go bhfuil an t-úsáideoir ag idirghníomhú leis an bhfeidhmchlár. gan scáileán agus tú ag tiomáint, nó toisc go bhfuil an t-úsáideoir dall), caibidlí nó meiteashonraí. Is é an réamhshocrú fotheidil.
Tá an srclang insíonn tréith don bhrabhsálaí cén teanga ina bhfuil na comhaid téacs agus tugann sé deis duit níos mó ná tacar amháin a cheangal le físeán nó le fuaim - ionas go bhféadfá fotheidil a thairiscint i dteangacha éagsúla. Tá an lipéad roghnach agus is teideal inléite don úsáideoir é don rian.
rialuithe físe> foinse src = movie.mp4 type = video / mp4> foinse src = movie.webm type = video / webm> track type = fotheidil srclang = en src = subtitles-en.vtt> track type = fotheidil srclang = de src = subtitles-de.vtt label = "Gearmáinis">! - titim siar ábhar, m.sh. scannán Flash nó cód / físeán leabaithe YouTube>
Ní dhéanann an spec aon cheanglais ar na brabhsálaithe maidir leis an gcaoi a gcuireann siad téacs uainithe in iúl, agus níl aon tacaíocht ag aon bhrabhsálaí loingseoireachta dó fós, ach is féidir linn triail a bhaint as Polyfill.
Le haghaidh fréamhshamhlú tapa, is maith liom Playr a úsáid, script éadrom ó Julien Villetorte. Tá sé ar fáil ar Github. Just grab na híomhánna a chomhdhéanann an Chomhéadain Playr, cuir playr.js agus playr.css i gceann do leathanaigh, cuir ainm an ranga leis playr_video le do chlib físe agus soláthróidh do leathanach le craiceann sexy Playr agus an cumas rogha a dhéanamh idir do chuid fotheidil.
Tabhair faoi deara gurb é an Polyfill a dhéanann an Chomhéadain agus nach bhfuil sé ionsuite in aon bhrabhsálaí fós - ach beidh go luath. Tá Opera, Microsoft agus Google ag obair air, agus gach seans go dtairgfidh na brabhsálaithe Chomhéadain agus feidhmiúlacht chomhchosúil dóibh.
Tá an rian> ní ghlacann eilimint le haon fhormáid ar leith don téacs uainithe ach an oiread. Sa chás seo, is comhad webVTT é, ach rian>, cosúil le img>, físeán> agus fuaime> is formáid agnostic. Tacóidh gach brabhsálaí leis an bhformáid nua WebVTT, agus d’fhógair Microsoft go dtacóidh sé le formáid níos sine darb ainm TTML.
WebVTT
Is formáid téacs uainithe nua-aimseartha é WebVTT. Tá an gréasán bruscair le formáidí eile - 50 ar a laghad - mar sin cén fáth ceann nua a chumadh? Toisc go bhfuil formáid shimplí de dhíth orainn.
Tá sé an-éasca údar a thabhairt do WebVTT. Is pointe ríthábhachtach é seo: má tá sé ró-deacair, ní bhacfaidh údair leis - agus níl aon mhéid tacaíochta tacaíochta brabhsálaí d’eilimintí nua agus do APIanna chun ábhar ilmheán a dhéanamh inrochtana mura bhfuil físeáin le fotheidil ann. Ar a shimplí, is cosúil le WebVTT:
WEBVTT
00:01.000 --> 00:02.000
Dia dhuit
00:03.000 --> 00:05.000
Domhanda
Níl ann ach comhad téacs ionchódaithe UTF-8, le WEBVTT ag an mbarr. Cuirtear amanna in iúl mar fhritháireamh ó thús na meán. Mar sin taispeánfar “Dia duit” ón dara soicind isteach san fhíseán go dtí dhá shoicind ó thús na físe (mar sin, á thaispeáint ar feadh soicind amháin). Beidh na fotheidil imithe go dtí trí shoicind ón tús, agus taispeánfar “Domhanda” ag an bpointe sin.
Níl sé i bhfad níos simplí. Ar ndóigh, is féidir leat níos mó a dhéanamh más mian leat. Mar shampla, is féidir leat seasamh an fhotheidil a athrú (mar sin ní bhfaigheann tú téacs bán ar chuid bán den fhráma, mar shampla).
00: 03.000 -> 00: 05.000 L: -85%
Bogann sé seo an fotheideal 85 faoin gcéad d’airde na meán “suas” óna shuíomh réamhshocraithe ag bun an fhíseáin.
Is féidir leat méid an téacs a athrú, mar shampla S: 150% méadaíonn sé an méid go 150 faoin gcéad den mhainneachtain. Is féidir go mbeadh fotheidil le feiceáil go hincriminteach (mar shampla, le liricí sna tithe tábhairne ina mbíonn an líne le feiceáil focal amháin ag an am, ach ní imíonn an focal roimhe sin nuair a thaispeántar ceann nua). Is féidir leat focail éagsúla cainteoirí a stíliú le dathanna éagsúla, agus tá tacaíocht bhunúsach ann chun focail éagsúla a stíliú le dathanna éagsúla. Le haghaidh tuilleadh faisnéise téigh chuig delphiki.com/webvtt/#cue-settings.
Níos tábhachtaí ná na roghanna stíle sin tá na roghanna idirnáisiúnaithe atá ar fáil. Tógann an tsonraíocht webVTT tacaíocht ó dheas go clé do theangacha mar Araibis agus Eabhrais, tacaíocht ingearach do theangacha mar an tSínis agus an cumas anótálacha Ruby a chur leis mar leideanna fuaimnithe don tSínis, don tSeapáinis agus don Chóiré.
Más mian leat triail a bhaint as webVTT, faigh greim ar Playr agus scríobh. Tá bailitheoir beo WebVTT scríofa ag Opera’s Anne van Kesteren chun do chuid oibre a thástáil.
Físeán lánscáileáin
Is maith le gach duine físeán lánscáileáin. Gach duine seachas na sonraitheoirí HTML5, is é sin, nár lig dó ar feadh i bhfad. Shamhlaigh WebKit a mhodh JavaScript féin ar a dtugtar WebkitEnterFullscreen (), agus chuir sé an API i bhfeidhm ar bhealach nach bhféadfaí a spreagadh ach amháin má thionscain an t-úsáideoir an gníomh - cosúil le fuinneoga aníos, nach féidir a chruthú mura ndéanann an t-úsáideoir gníomh cosúil le cliceáil.
I mBealtaine 2011, d’fhógair WebKit go gcuirfeadh sé blas Mozilla féin ar API lánscáileáin i bhfeidhm. Ligeann an API seo d’aon eilimint dul ar lánscáileán (ní amháin físeán>) - b’fhéidir gur mhaith leat
scáileán iomlán canbhás> cluichí nó giuirléidí físe leabaithe ar leathanach trí iframe>. Is féidir le scripteanna rogha a dhéanamh freisin go mbeidh ionchur méarchláir alfa-uimhriúla cumasaithe le linn amharc lánscáileáin, rud a chiallaíonn go bhféadfá do chluiche ardáin spiffing super a chruthú ag baint úsáide as an canbhás> API agus d’fhéadfadh sé lánscáileán a rith le tacaíocht iomlán méarchláir.
Toisc gur maith le Opera an cur chuige seo freisin, ba cheart dúinn rud éigin a fheiceáil ag druidim le hidir-inoibritheacht. Go dtí sin, is féidir linn leanúint ar aghaidh ag bréige lánscáileáin trí dhul go fuinneog iomlán, ag socrú toisí an fhíseáin chun méid na fuinneoige a chomhionann.
Eilimintí na meán a shioncronú
Tá an cumas eilimintí meán a shioncronú fós á shonrú, mar sin tá sé níos faide ó chur i bhfeidhm ná fotheidil agus fotheidil sioncronaithe. Ligfidh sé do roinnt eilimintí meán gaolmhara (físeán, fuaim, nó meascán den dá cheann) a nascadh.
Tá dhá phríomhchás úsáide ann le haghaidh seo. Samhlaigh suíomh a thaispeánann físeáin d’imeachtaí spóirt: d’fhéadfadh go mbeadh iliomad eilimintí físe ann, gach ceann ó uillinn dhifriúil ceamara - mar shampla, ceann ar gach aidhm, ceann san aer agus ceann amháin ag rianú na liathróide. D’fhéadfadh go mbeadh ceamara amháin ar an ngiotár bas, ceann ar an ngiotár, agus ceann ar an srón Peruvian ar shuíomh a thaispeánann ceolchoirm. Ba cheart go ndéanfadh aistriú an bharra lorg, nó an ráta athsheinm a athrú go gluaisne mall, difear do gach físeán ar gach ceann de na físeáin eile.
Cás úsáide tábhachtach eile is ea inrochtaineacht. Tá an rian> ligeann eilimint dúinn téacs a shioncronú le físeán; ligeann an cumas eilimintí meán a shioncronú dúinn físeán eile a shioncronú (mar shampla, scannán de dhuine ag síniú na bhfocal a labhraítear sa phríomhfhíseán) nó rian fuaime a shioncronú a chuireann síos ar an ngníomh i bhfíseán le linn sosanna idirphlé.
Tá API Rialaitheora iomlán sonraithe, ach is é an bealach is éasca chun eilimintí meán a shioncronú go dearbhaitheach, agus an tréith grúpa meán á úsáid ar físeán> nó fuaime>. Déanfar sioncrónú orthu siúd go léir a bhfuil an luach céanna acu do mheánghrúpa:
video mediagroup = "jedward" src = "bass-guitar.webm"> ../ video> video mediagroup = "jedward" src = "lead-guitar.webm"> ../ video> video mediagroup = "jedward" src = "idiot-1.webm"> ../ video> video mediagroup = "jedward" src = "idiot-2.webm"> ../ video>
Déanann an píosa marcála seo ceithre cheamara a shioncronú ar cheoltóirí éagsúla ag ceolchoirm Jedward. Déanann an méid seo a leanas sioncrónú ar thuairisc fuaime leis an scannán móréilimh Mankini Magic:
video mediagroup = "description-film" src = "mankini-magic.webm"> ../ video> audio mediagroup = "tuairisc-scannán" src = "description.ogg"> ../ audio>
Tá sé seo á shonrú fós, mar sin níl aon tacaíocht brabhsálaí ann agus (chomh fada agus is eol dom) níl aon polyfills ann.
Rochtain ar cheamara agus ar mhicreafón
Tá cúpla úsáid fágtha le haghaidh breiseán nár éirigh le HTML5 a úsáid go dtí seo. Is ábhar amháin é cóip a chosaint le DRM (féach an Q&A thuas agus thall chun tuilleadh a fháil faoi sin). Rud eile is ea sruthú oiriúnaitheach - an ráta giotán srl a athrú de réir dhálaí an líonra, cé go n-oibrítear air sin.
Go traidisiúnta is é críoch an bhreiseáin Flash, cuireann HTML5 leis an áis anois chun nasc a dhéanamh le ceamara agus micreafón feiste. Ar a dtugtaí HTML5 roimhe seo gléas>, tá an fheidhmiúlacht seo fillte anois in API ar a dtugtar getUserMedia. Chun a rá leis an bhfeiste cén cineál meán is mian linn a fháil, pasóimid fuaim nó físeán mar argóintí. Toisc go bhfuil ceamara chun tosaigh ag go leor gairis, a ghabhann íomhá an úsáideora, agus an ceamara cúil, is féidir linn pas a fháil in úsáideoir nó i dtimpeallacht an chomhartha.
Ar dtús, táimid ag brath ar:
más rud é (navigator.getUserMedia) {navigator.getUserMedia (‘fuaime, úsáideoir físe’, successCallback, ¬ errorCallback);
Nuair a bhíonn na sruthanna againn, is féidir linn iad a úsáid de réir mar is gá dúinn. Anseo, ní dhéanfaimid ach an sruth ar an leathanach a mhacasamhlú tríd an sruth a cheangal le foinse eilimint físe:
var video = document.getElementsByTagName (‘video’) [0] ... feidhm successCallback (sruth) {video.src = sruth; }
Nuair a bheidh sé seo againn, tá sé simplí an físeán a chóipeáil isteach in eilimint chanbhás ag baint úsáide as drawImage chun fráma reatha na físe a thapú, agus é a atarraingt gach 67millisecond (mar sin thart ar 15 fráma in aghaidh an tsoicind). Nuair atá sé sa chanbhás, is féidir leat rochtain a fháil ar na picteilíní trí getImageData.
I sampla le Richard Tibbett de Opera is féidir le JavaScript rochtain a fháil ar an chanbhás chun aitheantas aghaidhe a dhéanamh - i bhfíor-am! - agus, nuair a aimsítear aghaidh, mustache draíochta HTML5 a tharraingt san áit cheart.
getUserMedia Tugtar tacaíocht dó in Opera 12, Opera Mobile 12 agus Canary build
de Chrome. Is féidir go leor samplaí eile de getUserMedia a fháil anseo.
Gan amhras, d’fhéadfadh fadhbanna suntasacha príobháideachta a chruthú trí rochtain a thabhairt do láithreáin ghréasáin ar do cheamara gréasáin, mar sin beidh ar úsáideoirí rogha an diúltaithe a dhéanamh, mar a bhíonn baint acu le geolocation. Ach is ábhar imní UI é sin seachas fadhb theicniúil.
Ar ndóigh, is féidir go bhfuil dearthóirí an getUserMedia Bhí úsáidí eile i gcuimhne ag API, seachas mustaches a tharraingt. D’fhéadfaí é a úsáid do léitheoirí QR / barrachód bunaithe ar bhrabhsálaí. Nó, níos spreagúla, réaltacht mhéadaithe. Tá Grúpa Oibre HTML5 ag sonrú API piara go piaraí faoi láthair a ligfidh duit do cheamara agus do mhicreafón a cheangal leis an físeán> agus fuaime> gnéithe de bhrabhsálaí duine eile, rud a fhágann gur féidir físchomhdháil a dhéanamh.
WebRTC
I mBealtaine 2011, d’fhógair Google WebRTC, teicneolaíocht oscailte do ghuth agus d’fhíseán ar an ngréasán, bunaithe ar shonraíochtaí HTML5. Seasann RTC do “chumarsáid fíor-ama”, agus tá físchomhdháil sa bhrabhsálaí. Ceanglaíonn sé do cheamara agus do mhicreafón le heilimint físe> ar leathanach gréasáin i mbrabhsálaí do chara (agus a mhalairt) thar an API PeerConnection HTML5.
Úsáideann WebRTC VP8 (an CODEC físe i WebM) agus dhá chódchód optamaithe le haghaidh cainte le cealú torainn agus macalla, ar a dtugtar iLBC, CODEC guth banda caol, agus iSAC, CODEC leathanbhanda oiriúnaithe bandaleithid. Mar a deir suíomh Gréasáin an tionscadail, “Táimid ag súil go bhfeicfimid tacaíocht WebRTC i Firefox, Opera, agus Chrome go luath!”
Mar a fheiceann tú, tá tacaíocht ilmheán HTML5 ar tí a lán níos saibhre a fháil. Mar is gnách le HTML5, ní mór do na cur chun feidhme teacht suas leis an spec - agus caithfear na specs a chríochnú freisin - ach tá cuma spreagúil ar an todhchaí go deimhin.
Chun tuilleadh a fháil amach anseo maidir le todhchaí na físe, féach ar ár Q & As le John Foliot agus Silvia Pfeiffer
