A HTML5 előtt egy videó lejátszásához egy weboldalon olyan plugint kell használnia, mint az Adobe Flash Player. A HTML5 bevezetésével a videókat most közvetlenül az oldalba helyezheti el.
Ez lehetővé teszi a videók lejátszását olyan oldalakon, amelyeket mobil eszközökre terveztek, mivel az Adobe Flash Playerhez hasonló plug-inek nem működnek Android vagy iOS rendszeren.
A HTML elem a videó webes dokumentumokba történő beágyazására szolgál. Tartalmazhat egy vagy több videoforrást, amelyeket az srcattribútum vagy a forráselem használ .
Videofájl beágyazásához egyszerűen adja hozzá ezt a kódrészletet, és változtassa meg a srcvideofájl elérési útját:
Your browser does not support the video element. Kindly update it to latest version. Az elemet minden modern böngésző támogatja. Azonban nem minden böngésző támogatja ugyanazt a videofájl-formátumot. Az MP4 fájlok a legelterjedtebb formátum, és más formátumokat, például a WebM és az Ogg, a Chrome, a Firefox és az Opera is támogat.
Annak érdekében, hogy a videót a legtöbb böngészőben játssza le, a legjobb gyakorlat, ha mind Ogg, mind MP4 formátumba kódolja őket, és mindkettőt belefoglalja az elembe, mint a fenti példában. A böngészők az első felismert formátumot fogják használni.
Ha valamilyen okból a böngésző nem ismeri fel a formátumokat, akkor a "Böngészője nem támogatja a videoelemet. Kérjük, frissítse legújabb verzióra" szöveg jelenik meg.
Lehet, hogy észrevette controlsa címkében. Ez az elem sok hasznos attribútumot tartalmaz a lejátszási élmény testreszabásához.
controls
Az controlsattribútum kezeli, hogy megjelennek-e olyan vezérlők, mint a lejátszás / szünet gomb vagy a hangerő csúszka.
Ez egy logikai attribútum, vagyis igaz vagy hamis értékre állítható. Ha igazra szeretné állítani, egyszerűen adja hozzá a címkéhez. Ha nincs benne a címkében, akkor hamisra állítja, és a vezérlők nem jelennek meg.
autoplay
Az "automatikus lejátszás" lehet igaz vagy hamis. Igazra állítja úgy, hogy hozzáadja a címkéhez, ha a címkében nincs, akkor hamisra állítja. Ha igazra állítja, akkor a videó lejátszása megkezdődik, amint elegendő puffer van a videóból ahhoz, hogy le tudja játszani. Sokan az automatikus lejátszású videókat zavarónak vagy idegesítőnek találják. Tehát használja ezt a funkciót takarékosan. Vegye figyelembe azt is, hogy egyes mobil böngészők, például az iOS Safari, figyelmen kívül hagyják ezt az attribútumot.
Ez egy másik logikai attribútum. Azzal, hogy autoplaya tag, a beágyazott videó lejátszása elindul, amint elegendő belőle egy átmenetileg.
Ne feledje, hogy sok embernek az automatikus lejátszása zavarónak vagy idegesítőnek találja, ezért használja ezt a funkciót takarékosan. Vegye figyelembe azt is, hogy egyes mobil böngészők, mint például az iOS Safari, teljesen figyelmen kívül hagyják ezt az attribútumot.
poster
Az posterattribútum az a kép, amely addig jelenik meg a videón, amíg a felhasználó rákattint a lejátszására.
A videók drágák lehetnek
Bár könnyebb, mint valaha, videókat felvenni az oldaladra, gyakran jobb, ha videóidat feltöltöd egy olyan szolgáltatásba, mint a YouTube, a Vimeo vagy a Wistia, és beágyazod a kódjukat. Ez azért van, mert a videók kiszolgálása drága lehet, mind a kiszolgáló költségeit tekintve, mind a nézők számára, ha korlátozott adatátviteli terveik vannak.
Saját videofájlok tárolása a sávszélesség problémáihoz is vezethet, ami a lassan betöltődő videók akadozását jelentheti. Ráadásul a böngészők általában eltérő minőségűek a videolejátszás terén, így nehéz pontosan szabályozni, hogy a nézők mit fognak látni. A címkével beágyazott videók letöltése is nagyon egyszerű , így ha kalózkodással foglalkozik, érdemes más lehetőségeket is megvizsgálnia.
És ezzel menj elő, és ágyazz be videókat a szíved szerint. Vagy nem - ez a hívása.