Kad visi trumpam galėtume grįžti atgal į prisiminimus, čia pavyzdys, kaip klasikiniu būdu įterpti vaizdo įrašus į svetainę:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Tokia sintaksė žinoma ne kaip graži.
Tačiau net jeigu praleidžiame estetinį matymo kampą: Sintaksė šioje formoje tiesiog per daug klaidžia ir sudėtinga. HTML5 leidžia lengviau įterpti vaizdo įrašus. Tam naudojamas video-elementas.
Čia pavyzdys, kaip galima įterpti šį video-elementą:
<video src="video.ogv" width="300" height="200"> Deja, Jūsų naršyklė nėra suderinama su HTML5 </video>
Štai paprasčiausias variantas. Ši sintaksės forma turi tris svarbius atributus. Per src nurodomas įterpiamas vaizdo įrašas. Čia būtinai atkreipkite dėmesį į teisingą kelio nurodymą. Abudu atributai width ir height nustato vaizdo plotį ir aukštį. Jei nenurodomas nei vienas iš šių atributų, vaizdas bus rodomas originalaus dydžio. Jei nurodomas tik vienas iš šių dydžių, naršyklė automatiškai apskaičiuoja kitą dydį. Atributas autoplay nurodo naršyklei automatiškai paleisti vaizdo įrašą, kai puslapis yra įkeltas. Paprastai šį atributą reikėtų nustatyti, nes vartotojai paprastai nenori automatinio leidimo. Taip pat tai ypač taikoma vartotojams, kurie naudoja mobilias priemones su mažu duomenų srautu.
Dar vienas įdomus atributas yra controls. Kai naudojamas šis atributas, naršyklėje rodomi natūralūs vaizdo atkūrimo ir garso valdymo komponentai.
<video src="video.ogv" width="300" height="200" controls> Deja, Jūsų naršyklė nėra suderinama su HTML5 </video>
Čia rezultatas naršyklėje:
Nuvilkti tą varžybų juostą ne tik galima sustabdyti ir vėl paleisti vaizdo įrašą, tačiau jame yra ir garsio reguliavimo funkcionalumas.
Jūs galite nurodyti paveikslą per poster atributą, kuris bus rodomas iki vaizdo įrašo pradžios. Naudojamas šiam tikslui poster atributas.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Deja, Jūsų naršyklė nėra suderinama su HTML5 </video>
Vėlgi atkreipkite dėmesį į teisingą kelio nurodymą, kad paveikslas būtų matomas.
Dėmesio reikia skirti naudojant autoplay atributą. Šis atributas nustato, kad vaizdo įrašas turi automatiškai paleisti, kai jis pasiekiamas.
<video src="video.ogv" width="300" height="200" autoplay> Deja, Jūsų naršyklė nėra suderinama su HTML5 </video>
• auto – Naršyklė gali visą failą iš anksto užkrauti.
• none – Failas neturi būti užkrautas iš anksto.
• metadata – Failą galima užkrauti iš anksto.
Jeigu nepateikiamas preload atributas, naršyklė naudoja numatytasias nustatymas.
Vaizdo įrašai ir kodekai
Tie, kas užsiima vaizdo įrašų įterpimu ir atkūrimu svetainėse, anksčiau ar vėliau susiduria su įvairių kodekų problema. Dėka šių kodekų video įrašai gali būti efektyviai suspaudžiami ir išskleidžiami. Problema: Iki šiol naršyklių gamintojai nesugebėjo sutarti dėl bendro kodeko formato. HTML5 (ir galų gale ir jūsų atžvilgiu) reiškia, kad nėra vienodų kodekų vaizdo ir garso failams.
Dabar video formatuose Ogg ir MP4 jau plačiai įsišaknijusios. Todėl daugiau ar mažiau esate saugūs, jei siūlote šiuos du formatus. Tam video-elementui priskiriami du source-elementai.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Čia jūs nenurodote vaizdo šaltinio viduje video elemento. Vietoje to, ten tik daromos visosbendros informacijos apie atvaizdavimą. Koks vaizdas turi būti rodomas nustatomas naudojant source elementą. src atributas priskiria atitinkamą vaizdą. Po type seka nurodymas, kokio tipo vaizdas yra / kokiu formatu vaizdas yra pateiktas.
Jeigu nurodyta keli source elementai, naršyklė visuomet leidžia pirmą vaizdą, kuris "tinka". Ką reiškia šis "tinka", bus aprašyta žemiau.
Tačiau kuris naršyklės iš tikrųjų moka kurį formatą? Atsakymą į šį klausimą pateikia toliau pateikta lentelė.
| Naršyklė | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internetinis Exploreris | Nuo 9 versijos | |
| Mozilla Firefox | Taip | |
| Google Chrome | Taip | Taip |
| Opera | Taip | |
| Safari | Taip | |
| iPhone | Taip | |
| Android | Taip |
Lentelė aiškiai parodo dilemą: formatus išversti į skirtingas naršykles beveik lygiavertis uždavinys. Todėl praktiškai jau priversti nurodyti vaizdus abiejuose formatais.
Naudojant media atributą, kuris gali būti priskirtas tik source elementui, galima aiškiai nurodyti, kokioms medijos tipas vaizdas yra tinkamas. Norint nurodyti vaizdus ypač tam tikriems įrenginiams, src priskiriamas media atributas. Naudodami šį media atributą nurodome pageidaujamą medijos tipą.source elementui galima naudoti tokią panaudojimo būdą:
<video width="400" height="300">
<!-- Tik mobiliems įrenginiams -->
<source src="video_mobil.ogg" media="handheld" />
<! - Visiems kitiems įrenginiams -->
<source src="video_normal.ogg" media="all" />
</video>
Naudant media atributą patikrinama, ar tai yra mobilusis įrenginys. Tokiu atveju bus atkurtas vaizdas mažesniu dydžiu. Jei tai yra kitas įrenginys, all pritaikomas.
Vaizdus saugiai įtraukti
Žinoma, kad HTML5 vis dar nėra palaikomas visų naršyklių. Tai taip pat galioja ir video elementui. Sprendimas siūlo įvairių įtraukimo technologijų derinys. Čia seniai žinomi object ir embed elementai derinami su video. Toks derinys galėtų atrodyti taip:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Tokių būdu įtraukti vaizdai gali būti paleidžiami daugumoje naršyklių. Naršyklės, kurios pažįsta video elementą, naudojasi juo. Kitos naršyklės kitaip naudojasi object arba embed elementais.
