HTML in CSS za začetnike (del 22): Multimedija za spletno stran (1)

Da bi se lahko vsi malo potopili v spomine, tukaj je primer, kako se običajno vključujejo videoposnetki v spletno stran:

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

Takšna sintaksa je seveda vse prej kot lepa.

Vendar tudi če za trenutek zanemarimo estetski vidik: Ta sintaksa je v tej obliki preprosto preveč nagnjena k napakam in preveč kompleksna. V HTML5 je veliko lažje vključiti videoposnetke. Za to se uporablja element video.

Tukaj je primer, kako se vključi ravno ta element video:

<video src="video.ogv" width="300" height="200">
   Vaš brskalnik žal ni združljiv s HTML5
</video>

To je najpreprostejša oblika. Trije atributi so pri tej sintaksi obliki ključnega pomena. Preko src se navede videoposnetek za vključitev. Pri tem bodite pozorni na pravilno navedbo poti. Oba atributa width in height določata širino in višino videa. Če nobenega od obeh vrednosti ni navedenega, se video prikaže v svoji prvotni velikosti. Če je navedena samo ena od vrednosti, bo brskalnik samodejno izračunal drugo vrednost. Atribut autoplay naroči brskalniku, naj se video samodejno zažene, ko je stran naložena. Ta atribut običajno ni priporočljivo nastaviti, saj uporabniki običajno ne želijo samodejnega predvajanja. To še posebej drži za uporabnike, ki uporabljajo mobilne naprave z omejeno pasovno širino.

Še en zanimiv atribut je controls. Če ga uporabite, bodo brskalniku prikazani običajni nadzorni elementi za predvajanje in glasnost.

<video src="video.ogv" width="300" height="200" controls>
   Vaš brskalnik žal ni združljiv s HTML5
</video>

Tukaj je rezultat v brskalniku:

Preko prikazane vrstice lahko video ne le zaustavite in ponovno zaženete, ampak vključuje tudi nadzor nad glasnostjo.

Z atributom poster lahko določite sliko, ki se prikaže do začetka videa. Za to se uporablja atribut poster.

<video src="video.ogv" width="300" height="200" poster="video.gif">
   Vaš brskalnik žal ni združljiv s HTML5
</video>

Pri tem ponovno pazite na pravilno navedbo poti, da bo slika dejansko vidna.

Pri uporabi atributa autoplay bodite pozorni. Ta atribut določa, da se video samodejno predvaja, ko je na voljo.

<video src="video.ogv" width="300" height="200" autoplay>
   Vaš brskalnik žal ni združljiv s HTML5
</video>

V zvezi s prometom je lahko zanimiv atribut preload. Ta atribut nadzira predvajalno vedenje. Ta atribut lahko prevzame naslednje vrednosti:

• auto – Brskalnik lahko prednaloži celotno datoteko.

• none – Datoteka se ne sme predvajati.

• metadata – Datoteka lahko prednaloži.

Če manjka atribut preload, se uporabijo privzete nastavitve brskalnikov.

Videi in kodeki

Tisti, ki se ukvarjate s vstavljanjem in predvajanjem videoposnetkov na spletnih straneh, boste prej ali slej naleteli na težave z različnimi kodeki. Zahvaljujoč tem kodirnikom je mogoče video posnetke učinkovito stisniti in stisniti. Težava je v tem, da se proizvajalci brskalnikov do danes niso mogli uskladiti o skupnem formatu kodeka. Za HTML5 (in s tem tudi za vas) to pomeni, da ni enotnih kodekov za videoposnetke in avdio datoteke.

Za videoposnetke sta se medtem uveljavila formata Ogg in MP4. Zato ste dejansko vedno na varni strani, če video ponudite v teh dveh formatih. Za to elementu video dodelite dva elementa source.

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

Tukaj torej ne navedete vira videa znotraj elementa video. Namesto tega se tam navedejo samo splošni podatki o prikazu. Katero video naj bo prikazano, se določi prek elementa source. Attributu src se dodeli ustrezno video. Za type sledi navedba, o kateri vrsti videa gre oz. v katerem formatu je video na voljo.

Če je navedenih več elementov source, brskalnik vedno predvaja prvi video, ki "ustreza". Kaj pomeni "ustreza", je opisano spodaj.

Kateri brskalnik dejansko obvlada kateri format? Odgovor na to vprašanje zagotavlja spodnja tabela.

Tabela jasno prikaže dilemo: Razporeditev interpretacije formatov je skoraj enakomerno razdeljena med posamezne brskalnike. Zato ste skoraj prisiljeni navajati videe v obeh formatih.

Prek atributa media, ki ga je mogoče dodeliti le elementu source, lahko na primer natančno določite, za kateri medijski tip je video primeren. Da bi določili videe posebej za določene končne naprave, se atributu src dodeli atribut media. Prek tega atributa media določite želeni medijski tip.

Mogoča uporaba za element source bi lahko izgledala tako:

<video width="400" height="300">
    <!-- Samo za mobilne naprave -->
    <source src="video_mobil.ogg" media="handheld" />
    <!—Vsi ostali napravi -->
    <source src="video_normal.ogg" media="all" />
 </video>

Prek atributa media se preveri, ali gre za mobilno napravo. V tem primeru se predvaja video v manjši velikosti. Če gre za drugo napravo, velja vrednost all.

Varno vključevanje videov

HTML5 do sedaj še ni bil v celoti podprt v vseh brskalnikih. To velja seveda tudi za element video. Rešitev ponuja kombinacija različnih tehnik vključevanja. Pri tem se kombinirajo že znani elementi object in embed z elementom video. To bi lahko izgledalo tako:

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

Na ta način vključeni videi bodo predvajani v večini brskalnikov. Brskalniki, ki poznajo element video, ga bodo uporabili. Ostali brskalniki pa bodo namesto tega uporabili informacije v elementu object ali pa v elementu embed.