HTMLi kursus #6.2 – keerulised meediaelemendid

HTMLi kursus #6.2 – keerulised meediaelemendid

Eelmine osa: HTMLi kursus #6.1 – lihtsad meediaelemendid

Selles meediaelementide osas on keerulisemad elemenedid.

See tähendab seda, et need elemendid vajavad korralikuks funktsioneerimiseks mingis muus keeles välisfaili (mida ma arvan, et sa veel ei tunne).

Ja selletõttu ei pruugi sa neid elemente täielikult kasutada.

Kui aga sa saad asjadest aru ja sa oskad elemente kasutada, siis on väga hea 🙂 !

Näidislehe saab siit (interaktiivne näide asub siin).

Näidisleht

Keerulisemad meediaelemendid seletatult

<track /> – defineerib ära erinevad tekstid videotele ja helidele (subtiitrid, pealkirjad jne). Kasutatakse tavaliselt subtiitrite, aga ka kirjelduste lisamiseks videole ja/või helile. Sõna track tuleb ingliskeelest ja tähendab eesti keeles rada.

Nagu ikka meediaelementidel on ka <track> elemendil üsnagi palju atribuute. Üks nendest on ka kohustuslik

  • src="URL" – tähistab teksti faili URLi. See on kohustuslik atribuut.
  • srclang="keele_kood" – defineerib ära, mis keeles on <track> element. Kohustuslik kui kind atribuudi väärtuseks on "subtitles". Terve nimekirja keele koodidest võib leida siit.
  • default="default" – kahendloogika atribuut; määrab ära, milline <track> element on vaikimisi valik (<track> elementi saab lisada mitu tükki meediaelementidesse).
  • kind="captions | chapters | descriptions | metadata | subtitle" – määrab ära, mis tekstiga on tegemist
    • kind="captions"<track> element defineerib ära dialoogide tõlke ja helide imitatsiooni (hea kurtidele)
    • kind="chapters"<track> element defineerib ära mingite osade pealkirjad meedias
    • kind="descirptions"<track> element defineerib ära tekstilise kirjelduse meediast (hea pimedatele, kes kasutavad ekraanilugejaid)
    • kind="metadata"<track> element defineerib ära skriptidele kasulikku info meedia kohta. Lugeja/kasutaja seda ei näe
    • kind="subtitles"<track> element defineerib ära subtiitrid meediale
  • label="tekst" – defineerib ära <track> elemendi nime

Enda veebilehes kasutasin <track> elementi väikese motiveeriva teksti investeerimisega seoses.

Nüüd et <track> element saaks korralikult töötada, siis on vajalik kindlas formaadis tekstifaili, mis paneks paika, millal me teksti videos või audios näitame.

Kõige levinum failiformaat teksti näitamiseks on WebVTT.

WebVTT süntaks on üsnagi lihtne, aga praegu annan lihtsa ülevaate, milline üks WebVTT fail välja näeb.

WebVTT fail, mida kasutasin investeerimisvideos

WEBVTT FILE

ivesting_1
00:00:00.000 --> 00:00:10.000
Investeerimine on päris tore.

ivesting_2
00:00:10.000 --> 00:00:20.000
Investeerida saab nii aktsiatesse, kinnisvarasse, laenudesse jne.

ivesting_3
00:00:20.000 --> 00:00:30.000
Parim aeg investeerimisega alustamine oli eile.

ivesting_4
00:00:30.000 --> 00:00:40.000
Parimuselt teine aeg investeerimisega alustamine on täna.

ivesting_5
00:00:40.000 --> 00:00:50.000
Üks väga hea raamat investeerimise kohta on Jaak Roossaare poolt kirjutatud "Rikkaks Saamise Õpik"

ivesting_6
00:00:50.000 --> 00:01:00.000
Loe seda kindlasti, isegi kui arvad, et investeerimine pole sinu jaoks

Igat faili alustatakse “WEBVTT FILE” – see määrab täpselt ära, et tegemist on WebVTT (.vtt) failiga.

Üks rida vahele

Tavaliselt järgneb cue ehk märgusõna, mis lihtsalt jagab WebVTT faili osadeks (nagu minul on investing_1, investing_2 jne).

Nüüd järgneb aeg, kus teksti näidatakse. Aeg peab täpselt vastama formaadile hh:mm:ss.mms --> hh:mm:ss.mms (mms – millisekund).

Nool vahepeal (–>) tähendab põhimõtteliselt “kuni”. Ehk kui mul on 00:00:00.000 --> 00:00:10.000 , see tähendab, et näita teksti 0 sekundist kuni 10 sekudini.

Järgneb tekst ise, mida kasutajale meedia mängimise ajal näidatakse.

Üks rida vahele ja tuleb järgmine märgusõna koos ajavahemiku ja tekstiga.

Kui kedagi huvitab rohkem WebVTT fail ja selle süntaks, siis päris pika õpetuse võib leida siit.

 

<canvas></canvas> – arvatavasti seda elementi sa niipea ei kasuta, aga ma toon selle siiski välja. Nimelt, et <canvas> elementi kasutada, läheb vaja JavaScripti. JavaScript (või mõni muu JavaScripti raamistik/teek) saab joonistada <canvas> peale erinevaid kujundeid ja ka neid liigutada. Graafika on <canvas> ainukene eesmärk. <canvas> kasutatakse tihti mängude vms loomiseks HTMLis. Sõna canvas tuleb ingliskeelest ja tähendab eesti keeles lõuendit/maali.

<canvas> on kaks talle omast atribuuti:

  • width="laius pikslites" – annab <canvas> kindla laiuse pikslites
  • height="kõrgus pikslites" – annab <canvas> kindla kõrguse pikslites

<canvas>elementi kasutasin (koos JavaScriptiga) ühe koopia tegemiseks ünsagi kuulsast maalist Black Circle.

 

<svg></svg> – seda elementi kasutatakse sarnaselt <canvas> elemendile erinevate kujundite joonistamiseks. Suure tõenäosusega sa ka seda niipea ei kasuta. <canvas> erineb <svg> sellepoolest, et kui <canvas> elemendile saaks midagi joonistada tuleb kasutada JavaScripti, aga <svg> elemendiga saab joonistada ilma JavaScriptita, otse HTMLis. Lisaks sellele on <svg> lihtsam veebilehtedes erinevate logodena kasutada.

Siinkohal ma ei räägi <svg> elemendist eriti, sest <svg> peale võiks teha täiesti uue õpetusseeria. Ma ei lisanud seda ka enda veebilehte.

Ma tõin selle välja ainult silmaringi laiendamiseks.

Kui sind  <svg> rohkem huvi pakub, siis siit peaksid leidma üsnagi hea koha alustamiseks.

 

Siinses postituses ei annakski ma sulle kohustuslikku koduülesannet, aga kui sa said aru mingitest elemenditest, siis ma siiski soovitaksin neid ise proovida koodida, sest nõnda kulub rohkem elemente pähe ja sa tunned ennast HTMLiga järjest paremini.

Kui tekkis küsimusi või on mõne asja rohkem huvi, siis anna kommentaarides märku 🙂 !

 

Järgmine osa: HTMLi kursus #6.3 – RWD meediaelemendid

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *