4.08. Képek, Videók, hangok beillesztése

Csoki

Használható képformátumok

A HTML szabvány a JPG, PNG és a GIF szabványú képeket jeleníti meg. Minden más szabványt esetleg megjelenít egy böngésző, de nem lehetünk biztosak benne. Melyek ezeknek a képformátumoknak a tulajdonságai?

Tulajdonság GIF JPG PNG
Tömörített igen igen igen
Veszteséges tömörítés   igen  
16 millió szín (RGB)   igen igen
csak 256 szín igen    
Áttetsző háttér lehetséges igen   igen
A tömörítés mértékét lehet szabályozni   igen  
Mozgó képek tárolhatók benne igen    

Képek beillesztése

Pöttyös Túrórudi képe
Képfelirat

A fenti képet az <img> tag segítségével lehet megjeleníteni, amelynek a paraméterei az alábbiak:

<img alt="Pöttyös Túrórudi képe" title="Pöttyös Túrórudi képe" height="122" src="http://www.fzolee.hu/fw2/sites/default/files/pottyos_1.jpg" width="400" />
  • alt: Alternatív szöveg. Amikor lassan jeleníti meg a képet a böngésző, akkor először az itt található szöveg jelenik meg.
  • src: Itt kell megadni a kép elérhetőaségét a szerveren. ennek a részleteire később kitérünk.
    • Ha a paraméter http://www.fzolee.hu/...... módon kezdődik, akkor az internet valamelyik szerverén lévő képet használunk
    • Ha a paraméter a /fw2/sites/default/files/pottyos_1.jpg akkor a weboldalt kiszolgáló szerveren a webszerver gyökérkönyvtárától számítjuk a kép elérési útvonalát.
    • Ha a paraméter: files/pottyos_1.jpg, akkor a szerveren az éppen aktuális könyvtártól számítjuk a kép elérési útvonalát.
  • height: A kép magassága, hogyha át akarjuk méretezni képpontban megadva
  • width:  A kép szélessége képpontban megadva, ha át akarjuk méreteztetni a böngészővel.
    • Ha nem adunk szélesség és magasság paramétert, akkor a böngésző a képet eredeti méretében jeleníti meg.
    • Ha csak az egyik vagy a másik méretet adjuk meg, akkor a böngésző a hiányzó méretet arányosan változtatja
    • Ha a két méret a kép eredeti arányának nem felel meg, akkor a megjelenő kép torz lesz
  • title: Segítségével egy kis buborlkban megjelenik a kép címe, ha megállunk az egérrel.

A HTML 5 bevezetett még egy TAG-et: <figure>

Segítségével a HTML oldalba képet, grafikont és egyéb téglalap alakú területet definiálhatunk, amit a <figcaption> tag segítségével címkézhetünk is, mint a fenti példában

<figure class="image">
    <figcaption>Képfelirat</figcaption>
    <img alt="Pöttyös Túrórudi képe" height="118" src="http://www.fzolee.hu/fw2/sites/default/files/pottyos_1.jpg" width="387" />
    
</figure>

 

Pöttyös Túrórudi képe
Képfelirat

Ha egy képre kattinva át szeretnénk vinni a böngészőt egy további oldalra, akkor azt így lehet:

Pöttyös Túrórudi képe
Képfelirat

​Vagyis az <IMG> tag köré kell tenni egy <A> azaz link tag-et.

<figure class="image">
   <a href="https://hu.wikipedia.org/wiki/T%C3%BAr%C3%B3_Rudi">
     <img alt="Pöttyös Túrórudi képe" height="118" src="http://www.fzolee.hu/fw2/sites/default/files/pottyos_1.jpg" title="Pöttyös Túrórudi képe" width="387" />
   </a>
<figcaption>Képfelirat</figcaption>
</figure>

Új lehetőség: a változó képernyőszélességek esetén más és más fájlt tölt le a böngésző

 <picture>
  <source media="(min-width:650px)" srcset="kisvirag.jpg">
  <source media="(min-width:465px)" srcset="kisebbvirag.jpg">
  <img src="virag.jpg" alt="Virág" style="width:auto;">
</picture> 
​

Kép térképek használata

Akkor használunk ilyet, ha egy kép részleteire kattintva más és más helyre szeretnénk vinni a böngészőt.

<h2>Kattintson a kiválasztott alkatrészre:</h2>
<img src="alaplap.jpg" usemap="#map_name">
<map name=" map_name">
  <area shape="rect" coords="0,0,82,126" alt="Processzor" href="processzor.htm">
  <area shape="rect" coords="55,65,282,326" alt="Memória" href="memoria.htm">
….
  <area shape="circle" coords="124,58,8" alt="Akkumulátor" href="akku.htm">
</map>

(Ez a példa innen származik http://webfejlesztes.gtportal.eu/index.php?f0=1_kepek_03)

Nem gyakori a kép térképek használata.

Filmek, videok, hangok beillesztése

Aa multimédiás tartalmak beillesztése HTML oldalakba a HTML 5-ben egyszerűbbé vált. Mivel szükséges még régebbi változatokat is ismerni, ezért a régebbi technikával kezdjük:

IFRAME-ek

Az iframe egy beágyazott keret, amely egy másik html oldal vagy tartalmat jelenít meg.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
Youtube videok esetén a link végére lehet helyezni az alábbi paramétereket:
  • mute=1 - nem lesz hangja a videonak
  • autoplay=1 - automatikusan elindul a lejátszás
  • loop=1 - automatikusan a végtelenségig játszik a video (loop=0 esetén leáll)
  • controls=0 - a Youtube vezérlők eltűnnek

Flash videók JAVA appletek, ACtiveX, PDF, beágyazása OBJECT kóddal

Az <OBJECT> tag speciális, több funkciós tag, ezért használata körülményes. Mivel az Adobe Flash-t lassan már a böngészőkből száműzik, ezért csak a használatának a módját írom le, de nem hozok példát.

<object id="presentation" width="409" height="322" 
  type="application/x-shockwave-flash" 
  data="gorog_1.swf"> 

   <param name="allowScriptAccess" value="sameDomain"> 
   <param name="movie" value="gorog_1.swf"> 
   <param name="quality" value="best"> 
   <param name="bgcolor" value="#000000"> 
   <param name="allowFullScreen" value="true"> 
   <param name="play" value="true">               
</object>

HTML5 video elem használata

Ez a video nem minden böngészőben jelenik meg. Például a Firefox 47 nem jeleníti meg a videot, de a Chrome igen.

<video height="240px" width="320px" controls>
  <source src="http://www.fzolee.hu/fw2/sites/default/files/webfejlesztes/kulcsok.mp4" type="video/mp4" /> 
</video>

A HTML5 az mp4, az ogg és a WebM típusú videokat hajlandó megjeleníteni.

Ha a HTML 5-ben megadott vezérlőket is szeretnénk megjeleníteni, akkor egy kicsit még játszani kell a kóddal:

Használható paraméterek

  • height="1234px": a film területének szélessége
  • width="1234px": a film területének magassága
  • controls: Jelenjenek meg a vezérlők (play, pause gombok)
  • source="" - Különböző formátumú videók jelenhetnek meg a böngésző képességeitől függően
  • track: különböző típusú szövegek jelenjenek meg képaláírásként... (WebVTT formátumban: .vtt fájlok tartalmaznak ilyet)

formátumok és mime típusok:

  • ogg: video/ogg
  • WebM: video/webm
  • mp4: video/mp4

Ha hangokat akarunk beilleszteni, akkor az ogg és az mp3 formátumok között választhatunk.

<audio src="http://www.fzolee.hu/fw2/sites/default/files/webfejlesztes/hetvegi_nap.mp3" preload="auto" controls autoplay loop>&nbsp;
</audio>

Két paramétert tudunk átadni a lejátszónak, amelyek nem kötelezőek!

  • preload="auto", preload="none", preload=''metadata" - A file egyes paramétereit a böngésző előre letölti.
  • controls: A HTML-ben megadott vezérlők jelennek meg az oldalon
  • autoplay: amikor az oldalra tévedünk, akkor lejátsza a böngésző a zenei fájlt.
  • loop: Segítségével újra és újra lejátsza a zenei fájlt a böngésző.