HTML un CSS iesācējiem (22. daļa): multivides materiāli tīmekļa vietnē (1).

Lai visi īsi varētu atcerēties, šeit piemērs tam, kā klasiski iegulda video lapā:

<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>

Tāda sintakse zināmāmērā nav skaista.

Tomēr pat ja atstāj estētiskās vērtības malā: Šāda sintakse šajā formā ir vienkārši pārāk pakļauta kļūdām un pārāk sarežģīta. HTML5 videoklipus var iegult daudz vienkāršāk. To var izdarīt, izmantojot video-elementu.

Šeit ir piemērs tam, kā iegult minēto video-elementu:

<video src="video.ogv" width="300" height="200">
   Jūsu pārlūkprogramma diemžēl nav HTML5 saderīga
</video>

Tas ir visvienkāršākajā formā. Trīs atribūti ir būtiski šajā sintakses formā. Izmantojot src, norādīts iegulāmais videoklips. Šeit obligāti jāpievērš uzmanība pareizai ceļa norādei. Abi atribūti width un height nosaka videoklipa platumu un augstumu. Ja nav norādīts neviens no abiem platumu un augstumu, videoklips tiks parādīts tā izmērā. Ja norāda tikai vienu vērtību, pārlūkprogramma automātiski aprēķinās otru vērtību. autoplay atribūts instruē pārlūkprogrammu sākt videoklipu automātiski, kad lapa ir ielādēta. Parasti šo atribūtu vajadzētu nenorādīt, jo lietotāji parasti negrib, lai video automātiski atsāktos. Jo īpaši tas attiecas uz lietotājiem, kuri izmanto mobilo ierīci ar zemu joslas platību.

Vēl viens interesants atribūts ir controls. Lietojot to, pārlūkprogramma rāda tās pašu vadības elementus atskaņošanai un skaļumam.

<video src="video.ogv" width="300" height="200" controls>
   Jūsu pārlūkprogramma diemžēl nav HTML5 saderīga
</video>

Šeit ir rezultāts pārlūkprogrammā:

Iegultajā joslā ne tikai var apturēt un atsākt video, bet tajā ir arī skaļuma regulēšana.

Ar poster atribūtu varat norādīt attēlu, kas tiks rādīts līdz pat videoklipa sākumam. Izmantotais ir poster atribūts.

<video src="video.ogv" width="300" height="200" poster="video.gif">
   Jūsu pārlūkprogramma diemžēl nav HTML5 saderīga
</video>

Nebūtu jāaizmirst pareizā ceļa norāde, lai attēls tad tiešām tiktu attēlots.

Darbojoties ar autoplay atribūtu, jābūt piesardzīgiem. Jo šis atribūts nosaka, ka video jāatskaņo automātiski, nonākot pie pieejamā video.

<video src="video.ogv" width="300" height="200" autoplay>
   Jūsu pārlūkprogramma diemžēl nav HTML5 saderīga
</video>

Pēc datu apmaiņas aspekta var būt interesants preload atribūts. Jo šis atribūts kontrolē priekšielādes uzvedību. Atribūts var pieņemt šādas vērtības:

• auto – Pārlūks var pilnībā ielādēt failu.

• none – Failam nav jāpriekšielādējas.

• metadata – Failu var priekšielādēt.

Ja trūkst preload-attribūta, pārlūka iestatījumi tiek piemēroti.

Videoklipi un kodeki

Tēmas par videoklipu iegulšanu un atskaņošanu tīmekļa lapās risinot, agrāk vai vēlāk, saskarsieties ar problēmām saistībā ar dažādiem kodekiem. Pateicoties šiem kodekiem, videoklipus var efektīvi saspiež un dekompresē. Problēma slēpjas tajā, ka līdz šim pārlūktāju ražotāji nevarēja vienoties par kopēju kodeku formātu. HTML5 (un tāpēc, galu galā, arī jūsu) nozīmē, ka video un audio failiem nav vienota kodeka formāta.

Šobrīd videoklipiem ir uzņēmušies divi formāti - Ogg un MP4. Tāpēc, ja videoklipu piedāvā šajos divos formātos, jūs esat drošībā. To var izdarīt, norādot divus source-elementus video elementam.

<video width="400" height="300" controls="controls">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogg" type="video/ogg" />
 </video>

Jūs šeit tātad ne norādāt video avotu iekš video-elements. Tā vietā tiek dots vispārējs apraksts par attēlošanu. Kuru video parādīt, nosaka ar source-elementu. Src-atribūtam tiek piešķirts atbilstošais video. Pēc type seko norāde, par kāda veida video ir runa vai kādā formātā video ir pieejams.

Ja ir norādīti vairāki source-elementi, pārlūks vienmēr atskaņos pirmo video, kas "pietiekami" atbilst. Kas nozīmē šis "pietiekami", tiks aprakstīts turpmāk.

Kurš pārlūkprogramma patiešām atbalsta kuru formātu? Uz šo jautājumu atbild tabula zemāk.

Tabula parāda dilemmas būtību: formātu interpretācija sadalās aptuveni vienlīdz starp dažādiem pārlūkiem. Tāpēc gandrīz jau ir nepieciešams norādīt video abos formātos.

Izmantojot media-atribūtu, kas ir piešķirts tikai source-elementam, varat norādīt, kādai mediju veidam videos ir piemērota. Lai norādītu video speciāli konkrētiem galapunktam, src jāpiešķir media-atribūts. Ar šo media-atribūtu tiek norādīts vēlamais mediju veids.

Vienu iespējamo source-elementa pielietojumu varētu izskatīt šādi:

<video width="400" height="300">
    <!-- Tikai mobilajiem ierīcēm -->
    <source src="video_mobil.ogg" media="handheld" />
    <!—Visām citām ierīcēm -->
    <source src="video_normal.ogg" media="all" />
 </video>

Šeit tiek pārbaudīts, vai ar media-atribūtu ir runa par mobilo ierīci. Šajā gadījumā tiek atskaņots mazākais izmēra video. Ja tas ir cita veida ierīce, tiek izmantots all vērtība.

Video droši iedarbināt

Ir zināms, ka HTML5 joprojām nav atbalstīts visos pārlūkos. Tas attiecas arī uz video-elementu. Risinājumu piedāvā dažādu integrācijas tehniku kombinācija. Šeit tiek apvienoti pazīstamie object un embed-elementi ar video. Tas varētu izskatīties šādi:

<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>

Tā iedarbinātie video tiks atskaņoti lielākajā daļā pārlūku. Pārlūki, kas pazīst video-elementu, piekļūs tam. Citas pārlūkas savukārt izmantos norādes object vai tieši embed-elements.