9. fejezet: Videó beszúrása

A legegyszerűbb egy Youtube-videót beágyazni, mivel itt pár kattintással megkaphatjuk a beágyazási kódot, pl.:

Videó beszúrása

Megjegyzés: ez a módszer HTML4-ben és 5-ben is működik.
Megjegyzés! A fenti űrlapot a Google Chrome biztonsági beállításai miatt kénytelen voltam képpé alakítani, így nem lehet HTML-formátumban letölteni!

Ha a fenti videót szeretnénk automatikusan lejátszhatóra állítani, akkor az URL-hez hozzá kell tenni a következőt: "?autoplay=1"
Így a következő verzió a lap betöltésekor automatikusan elindul.

Videó beszúrása autoplay

Megjegyzés! A fenti űrlapot a Google Chrome biztonsági beállításai miatt kénytelen voltam képpé alakítani, így nem lehet HTML-formátumban letölteni!
Öt paraméter látható is szerepel, melyek a következők:

  • height - magasság képpontban
  • width - szélesség képpontban
  • scr - forrásfájl megadása (relatív vagy abszolút útvonallal)
  • frameborder - keret vastagsága képpontban
  • allowfullscreen - teljes képernyős lejátszás engedélyezése

Beépített Flash-animációs (csak HTML5-ben engedélyezett):

<embed src="http://www.tferi.hu//cikkek/bohr.swf">

Fontosabb paraméterek:

  • height - magasság képpontban
  • width - szélesség képpontban
  • scr - forrásfájl megadása (relatív vagy abszolút útvonallal)
  • type - forrásfájl típusa

Megjegyzés: a fenti animáció a Bohr-fájl atommodell energiáiról készült Corel Rave programmal.

Másik lehetőség szintén HTML5-ben:

<video width="640" height="360" controls>
   <source src="/PaulPotts1st.mp4" type="video/mp4">
   A böngésző nem támogatja a video taget.
</video>

Fontosabb támogatott típusok:

  • MP4 - video/mp4
  • WebM - video/webm
  • OGG - video/ogg

Érdekesség, hogy a videóhoz lehet felirat is, pl.:
track src="/subtitles_en.vtt" kind="subtitles" srclang="en" label="English"
persze megfelelő HTML-tagjelekbe zárva.

További fontos paraméterek:

  • autoplay (érték nélkül) - automatikus elindulás.
  • loop (érték nélkül) - folyamatos lejátszás.
  • muted (érték nélkül) - hang nélküli lejátszás.
  • poster="URL" - a videó betöltése alőtt milyen képet rak ki a megfelelő ablakba.
  • preload="none/auto/metadata" - milyen előtöltést végez? Nagy méretű fájloknál érdemes használni. (none=semmit; auto=automatikus; metadata=csak a metadata adatokat)

Hang lejátszása esetén a példa kicsit átalakul:

<audio controls>
    <source src="/Ilyenek_Voltunk.mp3" type="audio/mp3">
    A böngésző nem támogatja az audio taget.
</audio>

A fontosabb paraméterek hasonlóak a videó paramétereihez!

Fontos megjegyzés: a mintaként hozott videók, illetve hangfájlok helyének megadására minden esetben vigyázni kell, ahogy a megfelelő szerzői jogokra is!

Felhasznált szakirodalom:
https://www.w3schools.com/tags/default.asp


Folytatása következik!