HTML ja CSS algajatele (Osa 22): Multimeedia veebilehe jaoks (1)

Ettevaatustähelepanuks, et saaksime kõik veidi nostalgitsema, siin on näide sellest, kuidas tavaliselt videosid veebisaidile lisatakse:

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

Niisugune süntaks ei ole loomulikult üldse ilus.

Kuid isegi kui jätame esteetilise aspekti kõrvale: Selline süntaks on sel viisil liiga erroritundlik ja keerukas. HTML5-s on videote lisamine palju lihtsam. Selleks kasutatakse video-elementi.

Siin on näide sellest, kuidas saab seda sama video-elementi lisada:

<video src="video.ogv" width="300" height="200">
   Kahjuks ei toeta teie brauser HTML5-i
</video>

See on kõige lihtsam variant sel kujul. Kuigi selle süntaksi vormi juures on kolm atribuuti olulised. Atribuudi src abil määratakse lisatav video. Olge kindlasti tähelepanelik õige failitee osas. Atribuudid width ja height määravad video laiuse ja kõrguse. Kui ühtegi neist väärtustest ei anta, kuvatakse video originaalmõõtmetes. Kui määratakse vaid üks väärtus, siis arvutab brauser teise väärtuse automaatselt. Atribuut autoplay teavitab brauserit, et video tuleb automaatselt käivitada lehe laadimisel. Tavaliselt ei soovitata seda atribuuti seada, kuna kasutajad ei soovi tavaliselt automaatset esitamist. See kehtib eriti kasutajate puhul, kellel on piiratud ribalaiusega mobiilsed seadmed.

Veel üks huvitav atribuut on controls. Selle kasutamisel kuvatakse brauseris taasesituse ja helitugevuse juhtelemendid.

<video src="video.ogv" width="300" height="200" controls>
   Kahjuks ei toeta teie brauser HTML5-i
</video>

Siin on tulemus brauseris:

Kuvatud riba abil saab videot mitte ainult peatada ja uuesti käivitada, vaid seal on ka helitugevuse reguleerimise funktsioon.

Saate määrata pildi, mis kuvatakse, kuni video alguseni, poster-atribuudi kaudu.

<video src="video.ogv" width="300" height="200" poster="video.gif">
   Kahjuks ei toeta teie brauser HTML5-i
</video>

Olge siin samuti tähelepanelik, et pildi tee on õige, et pilt oleks tegelikult nähtav.

Ole ettevaatlik autoplay-atribuudi kasutamisel. See atribuut määrab, et video tuleb automaatselt esitada, kui see on saadaval.

<video src="video.ogv" width="300" height="200" autoplay>
   Kahjuks ei toeta teie brauser HTML5-i
</video>

Trafikust tulenevalt võib olla huvitav preload-atribuut. See atribuut juhib eelmise käitumist. Selle atribuut võib võtta järgmised väärtused:

• auto – Brauser saab kogu faili eelnevalt laadida.

• none – Faili pole vaja eelnevalt laadida.

• metadata – Faili võib eelnevalt laadida.

Kui preload-attribuut puudub, võtab brauser vaikesätted.

Videod ja koodekid

Kes tegeleb videote veebisaitidele lisamise ja esitamisega, silmitsi võib varem või hiljem erinevate koodekitega seista. Tänu nendele koodekitele saab videoid tõhusalt kokku pakkida ja lahti pakkida. Probleem seisneb selles, et brauseritootjad pole siiani suutnud jõuda ühise koodekivormingu kokkuleppele. HTML5 (ning seega ka teie jaoks) puhul tähendab see, et videote ja helifailide jaoks pole ühtseid koodekeid saadaval.

Videote puhul on praeguseks kujunenud standardiks Ogg ja MP4 formaadid. Seetõttu olete alati turvalisel poolel, kui pakute videot nendes kahe formaadis. Selleks määrake video-elementidele kaks source-elementi.

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

Te ei määra siin videoallikat video-elemendis. Selle asemel tehakse seal üldisi väljundeid. Millist videot näidata, otsustatakse source-elemendi kaudu. src atribuudile määratakse vastav video. Pärast type järgneb märge selle kohta, millist tüüpi videot see on või millises formaadis on video olemas.

Kui on määratud mitu source-elementi, mängib brauser alati esimese video, mis "sobib". Mis "sobitumisega" täpsemalt on seotud, kirjeldatakse allpool.

Millist formaati konkreetne veebilehitseja tegelikult toetab? Sellele küsimusele vastab järgmine tabel.

Tabel näitab dilemmat: Formaatide tõlgendamine jaotub peaaegu võrdselt erinevate brauserite vahel. Seetõttu on praktiliselt vajalik esitada videoid mõlemas formaadis.

media atribuudi, mis võib olla ainult source-elemendile määratud, abil saab muide eraldi määrata, millist tüüpi meediumile see video sobib. Et määrata videoid spetsiaalselt teatud seadmetele, tuleb atribuudi media anda src-el. Selle media atribuudi kaudu määratakse soovitud meediatüüp.

source-elemendi võimalik rakendamine võiks välja näha järgmiselt:

<video width="400" height="300">
    <!-- Ainult mobiilsetele seadmetele -->
    <source src="video_mobil.ogg" media="handheld" />
    <! -- Kõik teised seadmed -- >
    <source src="video_normal.ogg" media="all" />
 </video>

Selle media atribuudi abil kontrollitakse, kas tegemist on mobiilse seadmega. Sellisel juhul mängitakse väiksema suurusega videot. Kui tegemist on teise seadmega, kasutatakse "all" väärtust.

Videote turvaline lisamine

HTML5 ei ole teadaolevalt veel kõigi brauserite poolt toetatud. See kehtib muidugi ka video-elemendi kohta. Üks lahendus on erinevate lisamistehnikate kombinatsioon. Siin ühendatakse traditsioonilised object ja embed elemendid video elemendiga. See võiks välja näha järgmiselt:

<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="tõene" />
 <param value="väär" />
 <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="väär" pluginspage="http://www.apple.com/quicktime/download/">
 </embed>
 </object>
 </video>

Nii lisatud videod peaksid olema esitatavad enamikes brauserites. Brauserid, mis tunnevad video elementi, kasutavad seda. Ülejäänud brauserid kasutavad aga object või embed elementides olevaid andmeid.