HTML & CSS pradedantiesiems.

HTML ir CSS pradedantiesiems (23 dalis): Multimedija tinklalapiui (2)

Visi pamokos vaizdo įrašai HTML ir CSS pradedantiesiems

Garso failai įtraukiami į HTML5 panašiai į vaizdo įtraukimą. HTML5 tam pateikia audio elementą.

<audio src="song.mp3">
   Jūsų naršyklė nepalaiko audio elemento.
</audio>

Audio elementui per src atributą priskiriamas atkūrimo failo pavadinimas. Tačiau failas dar neatkuriamas. Tam reikalingi valdymo elementai.

Norėdami rodyti valdymo elementus, audio elementui priskiriate controls atributą.

<audio src="song.mp3" controls>
   Jūsų naršyklė nepalaiko audio elemento.
</audio>




HTML ir CSS pradedantiesiems (dalis 23): Daugialypė medžiaga tinklalapiui (2)

Jei trūksta controls, įtrauktas per audio elementą nebus matomas elementas. Atributo nebuvimas yra naudingas, jei norite įterpti savo valdymo elementus naudodami JavaScript.

Taip pat naudojimas audio elemento nėra be problemų. Kalta vėlgi naršyklės, kurios palaiko skirtingus formatus. Ši lentelė pateikia jums dėl to dabartinę situaciją.

... (likusi dalis nebuvo pateikta)

Naudojant embed dabar galima standartiškai įterpti „Flash“ filmus. Štai pavyzdys, kaip tai galėtų atrodyti:

<embed
    src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
    type="application/x-shockwave-flash"
    width="384"
    height="313"
    allowscriptaccess="always"
    allowfullscreen="true"
  />



Embed-elementui galima priskirti įvairius atributus. Svarbiausias iš jų žinoma vėl yra src-atributas. Per jį galiausiai nurodomas įterpiamas failas. Per type-atributą nurodomas MIME tipas.

„Flash“ atveju tai būtų application/x-shockwave-flash. Jei norite įtraukti „LaTeX“ failą, nurodykite application/x-latex. Įterpto failo plotis ir aukštis reguliuojamas per width ir height.

HTML & CSS pradedantiesiems (23 dalis): Daugialypės priemonės svetainei (2)

Taip pat yra kiti atributai, kurie, nors ir neoficialiai priklauso ne HTML5. Tačiau jie leidžia kontroliuoti naudojamą įskiepį. Taigi, prieš tai pateiktame pavyzdyje per „Flash atributus“ allowscriptaccess ir allowfullscreen buvo nustatyta, kad yra galimas scenarijaus prieiga ir visas ekranas. Taip pat yra ir quality-atributas, kuris leidžia nustatyti „Flash“ filmo kokybę.

<embed 
    src="flash.swf" 
    width="600" height="300" 
    type="application/x-shockwave-flash" 
    quality="high" 
 />

„Object“ elementas

„Object“ elementas panašiai kaip ir embed, veikia kaip turinio konteineris. Skirtumas yra tas, kad object žino tris skirtingus turinio modelius. Jei naršyklė nustato, kad tai yra tiesiogiai rodoma grafinė informacija, ji elgiasi taip, tarsi tai būtų img-elementas. Jei nurodytas objektas yra tinklalapio turinys, jis rodomas viduje projekcinės dangos. (Daugiau apie projekcinės dangos šiek tiek vėliau šio straipsnio). Kitais atvejais object veikia kaip embed.

Šis pavyzdys parodo „Flash“ filmo įterpimą naudojant „object“ elementą.

<object
    type="application/x-shockwave-flash"
    data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
    width="400"
    height="300">
    <param name="allowscriptaccess" value="always" />
    <param name="allowfullscreen" value="true" />
    <p>
         No plugin Flash įdiegtas jūsų naršyklėje.
    </p>
 </object>

Galbūt galutinai kyla klausimas, ar dabar turėtumėte naudoti object ar embed. Iš pirmo žvilgsnio šie du elementai atrodo beveik identiški. Ir iš tiesų object elementas gali padaryti viską, ką gali ir embed.

HTML ir CSS pradedantiesiems (23 dalis): Medija tinklalapyje (2)



Turinio įterpimui - išskyrus vaizdus - paprastai turėtumėte grįžti prie object elemento. Šis elementas leidžia nurodyti alternatyvų turinį, kuris bus rodomas, kai įterptas elementas negali būti įkeltas.