Heli veebilehel

Heliklippide mängimiseks veebilehel saame kasutada elementi <audio>. Elemendiga saame veebilehe külastajatele mängida helifaile kasutades src atribuuti.

<audio src="laul.mp3"></audio>

Vaikeväärtusena aga veebilehe külastaja juhtnuppe laulu käima ja pausile panekuks või heli valjususe muutmiseks ei näe. Selleks lisame atribuudi controls. CSS-iga saame lisatava kontrollpaneeli välimust ka muuta.

<audio src="laul.mp3" controls></audio>

Soovi korral saame brauserile ka öelda, mis tüüpi helifailiga on tegemist kasutades type atribuuti. Jättes helifaili tüübi määrata, püüab brauser seda teha automaatselt.

<audio src="laul.mp3" controls type="audio/mpeg"></audio>

Kui me soovime, et helifail hakkaks külastaja veebilehele jõudmisel mängima automaatselt, siis saame lisada atribuudi autoplay. Üldiselt ei ole automaatne heli mängima hakkamine soovitatav ning mobiilist vaadates see atribuut ei aktiveeru.

<audio src="laul.mp3" controls autoplay></audio>

Kui me aga soovime, et helifaili lõppedes hakataks lugu algusest peale mängima, saame lisada atribuudi loop.

<audio src="laul.mp3" controls loop></audio>

Lõpuks võime lisada ka atribuudi preload, mille omadustega saame valida, kas helifail laadidakse sisse lehe avamisel või alles siis, kui kasutaja “mängi” nupule klõpsab. Kui me seda atribuuti ei kasuta, siis automaatselt laetakse sisse ainult healifaili metaandmed (pikkus, formaat). Kasutada saame kolme väärtust: metadata (laetakse vaid meta-andmed, vaikeväärtus), auto (helifail laetakse automaatselt koos veebilehega), none (automaatselt ei laeta midagi).

<audio src="laul.mp3" controls preload="auto"></audio>

Video veebilehel

Videofaili veebilehel näitamiseks saame kasutada elementi <video>. Nagu ka helifaili puhul peame atribuudiks videofaili asukoha määrama atribuudiga src.

<video src="film.mp4"></video>

Kui me soovime, et veebilehe külastaja saaks video ka käima või pausile panna, muuta heli vajusust, siis peame lisama atribuudi controls.

<video src="film.mp4" controls></video>

Vaikeväärtusena kuvatakse veebilehe külastajale enne video käima panemist video esimest kaadrit. Kui me soovime kasutada mõnda muud pilti, siis saame selle pildi määrata atribuudiga poster.

<video src="film.mp4" controls poster="pilt.jpg"></video>

Soovi korral saame brauserile ka öelda, mis tüüpi videofailiga on tegemist kasutades type atribuuti. Jättes videofaili tüübi määrata, püüab brauser seda teha automaatselt.

<video src="film.mp4" controls type="video/mp4"></video>

Kui me soovime et videofail automaatselt mängima hakkaks, saame kasutada autoplay atribuuti. Mõned brauserid nõuavad selle puhul ka muted atribuudi kasutamist, mis tähendab, et vaikeväärtusena on video heli vaigistatud.

<video src="film.mp4" controls autoplay></video>

Nagu ka helifaili puhul saame soovi korral video panna korduse peale kasutades atribuuti loop.

<video src="film.mp4" controls autoplay loop></video>

Alati on kasulik määrata ära ka video kõrgus ja laius, et veebilehe laadimise hetkel oleks kindel kogus ruumi juba video jaoks broneeritud enne kui video ise sisse laadida jõutakse. Kasutame selleks height ja width atribuute.

<video src="film.mp4" controls height="480" width="900"></video>

Lõpuks võime lisada ka atribuudi preload, mille omadustega saame valida, kas videofail laadidakse sisse lehe avamisel või alles siis, kui kasutaja “mängi” nupule klõpsab. Kui me seda atribuuti ei kasuta, siis automaatselt laetakse sisse ainult videofaili metaandmed (pikkus, formaat). Kasutada saame kolme väärtust: metadata (laetakse vaid meta-andmed, vaikeväärtus), auto (videofail laetakse automaatselt koos veebilehega), none (automaatselt ei laeta midagi).

<video src="film.mp4" controls preload="auto"></video>

LISALUGEMINE: YouTube videoklipi veebilehele lisamine

Alati ei pea video, mida soovime oma veebilehel kuvada meil endas olemas olema, vaid võime kasutada ka nn vistutamise (veebilehele istutamine, embedding) funktsionaalust, mida pakuvad näiteks YouTube ja Vimeo keskkonnad. Sarnasel viisil saame oma veebilehele lisada tegelikult ka muudel veebilehtedel olevat sisu kasutades elementi <iframe>. Vaata ka: üks veebileht teise sees.

YouTube klipi lisamiseks otsime ülesse meile meelepärase Youtube video ning klikime video allservas asuvale “Jaga”/”Share” nupule. Seejärel avatakse hüpikaken, kust saame valida “Manustamine”/”Embed” ning meile kuvatakse kood, mille saame lisada oma veebilehe HTML koodis sobivasse kohta.

Näiteks üks võimalik kood, mille me YouTube’ist võime sellisel viisil saada:

<iframe width="560" height="315" src="https://www.youtube.com/embed/RWfFuOW69pc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Seejärel võime me enda oskuste kohaselt muuta juba erinevaid video atribuute ja nende väärtuseid.