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.:
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.
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
- << Előző
- Következő