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

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?

Képek beillesztése

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/fw/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 /fw/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/fw/files/pottyos_1.jpg" width="387" />
    
</figure>

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

​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/fw/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>

• mute=1 - nem lesz hangja a videónak
• autoplay=1 - automatikusan elindul a lejátszás
• loop=1 - automatikusan a végtelenségig játszik a videó (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 videót, de a Chrome igen.

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

A HTML5 az mp4, az ogg és a WebM típusú videókat 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/fw/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ő.