Az első blogjaiban a PC Pro , webfejlesztő Ian Devlin feltárja, hogyan lehet videókat beágyazni a webhelyére a HTML5 segítségével
milyen nyelven van kódolva a legendák ligája
Valószínűleg a HTML5 legnagyobb és legtöbbet beszélt funkciója a beágyazott videó. Jelenleg a videotartalom webhelyére történő felvételének egyetlen módja egy harmadik féltől származó plugin, például Flash, QuickTime vagy RealPlayer. A HTML5 és a videoelem hajnalán mindez megváltozik, a videotámogatást a webböngésző kezeli, így nincs szükség harmadik fél támogatására.
Számos webböngésző már kínál támogatást a HTML5-hez. Itt feltárjuk, hogyan ágyazhat be beépülő modul nélküli videókat a webhelyére, és milyen problémákat fog szembesíteni.
A fájltípusok és a böngésző kompatibilitása
Először röviden áttekintjük a HTML5 által támogatott különböző videofájltípusokat. Ezek a Theora OGG és a H.264 (.mp4). A különböző böngészők különböző típusokat támogatnak, egyesek pedig egyáltalán nem. A következő táblázat ezt mutatja:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Kodekek és egyéb technikai kérdések
Maga a HTML5 nem határoz meg videokodeket használni, és ez vitákhoz vezetett, hogy melyik a legjobban használható az interneten . Tehát az összes böngésző lefedéséhez mindkét kodeket támogatnunk kell.
És akkor természetesen ott van az Internet Explorer. Jelenleg az Internet Explorer egyik kiadott verziója sem támogatja a videó elemet, és a videó lejátszásához továbbra is szükséges egy plugin. Ez megváltozik az Internet Explorer 9 kiadásával (valószínűleg jövő év elején), amikor a H.264-et támogatják, sok más HTML5-delem mellett.
Abban az esetben, ha kíváncsi arra, hogyan konvertálhatja videofájljait OGG-re (a Theora OGG típusról a TheoraCookbook ) fájlokat a Miro Video Converter .
A videoelemről és a kodekekről további részletes információkat a merüljön el a html5: videóban az interneten írta Mark Pilgrim.
HTML5 kód
Most áttérünk a tényleges HTML5-kódra, és arra, hogyan tudjuk működtetni a dolgot. A HTML5 két új elemet biztosít számunkra, amelyek segítségével videót adhatunk weboldalunkhoz: a elem, amelyet már említettünk, és a elem. Nézzük ezeket mind sorban.
Az elem
A videó elemnek a következő attribútumai lehetnek:
| Tulajdonság | Leírás |
|---|---|
| src | a videófájl érvényes URL-je |
| automatikus lejátszás | logikai érték, amely jelzi, hogy a videót automatikusan le kell-e játszani |
| vezérlők | logikai érték, amely jelzi, hogy az alapértelmezett adathordozó-vezérlőket a böngészőnek kell megjelenítenie |
| hurok | logikai érték, amely jelzi, hogy a videót meg kell-e ismételni |
| előtöltés | jelzi a böngésző számára, hogy szükséges-e maga a videó előzetes letöltése, vagy csak metaadatokra van szükség. A lehetséges értékek:
|
| poszter | a képfájl URL-je, amelyet akkor kell megjeleníteni, ha nem állnak rendelkezésre videoadatok |
| szélesség | a videó szélessége CSS pixelben |
| magasság | a videó magassága CSS pixelben |
Ebből látható, hogy milyen egyszerű beágyazni egy OGG videót a weboldaladba, kizárólag a videoelem használatával:
Tényleg ennyi van benne.
Minden olyan böngészőnek, amely támogatja a Theora OGG formátumot, mostantól minden további nélkül sikeresen meg kell jelenítenie és lejátszania a videót. Természetesen ez nem olyan egyszerű, mint ez, mert amint a fenti táblázatból láthattuk, a kód csak Firefoxban, Chrome-ban és Opera-ban működne. Tehát szükségünk van egy tartalékra a H.264-re is. Ez a segítségével érhető el elem, amely lehetővé teszi számunkra, hogy több médiaforrást definiáljunk a videoelemhez.
meddig lehet videót feltenni az instagramra
Az elem
A forrás elem a következő tulajdonságokkal rendelkezik:
| Tulajdonság | Leírás |
|---|---|
| src | a médiafájl (ebben az esetben videó) érvényes URL-je |
| típus | a médiafájl típusa, amelynek a MIME típus , például. type='video/ogg' azt jelzi, hogy ez Theora OGG videó, és megadhatja a MIME kodeket is, hogy a böngésző eldönthesse a videó lejátszásának módját a type='video/ogg; codecs='theora, vorbis' használatával. |
| fél | megadja a média erőforrás kívánt média típusát, és érvényesnek kell lennie média lekérdezés , például. media='handheld' azt jelzi, hogy a videó alkalmas kézi eszközökre, vagy media='all and (min-device-height:720px)' ami azt jelzi, hogy a videó alkalmas 720 pixel vagy annál nagyobb képernyőkhöz. |
Megjegyzés: a forrás elem érvénytelen és rendelkezik kezdő címkével, de nincs záró címkével
A forráselemben az a leghasznosabb, hogy felhasználhatjuk a különböző fájltípusok halmozására, lehetővé téve a böngészőnek, hogy mindegyiket sorban kipróbálja, amíg meg nem találja azt, amelyet játszani tud.
Használat és együtt
Annak érdekében, hogy a videó elemen belül különféle típusú videókat helyezhessünk el, a következőképpen írjuk be a kódot:
Your browser does not support the video element.
A fenti kód mostantól az összes böngészőben működik, az Internet Explorer kivételével, amely a fent jelzett üzenetet jeleníti meg.
Ezt maga is kipróbálhatja, ha megtekinti a HTML5 Tesztvideó oldalt, amely a pillangó mintavételét tartalmazza Theora OGG és MP4 formátumban is, tehát ha ezt Firefoxban, Chrome-ban, Safari-ban, Opera-ban vagy iPhone-on vagy egy Android-kézibeszélőt, képesnek kell lennie arra, hogy megtekintse.
Az éles kések, amelyek közül Ön most észreveszi, hogy kihasználhatjuk ezt a halmozást, és a Flash (vagy valamilyen más plugin) tartalékkal rendelkezhetünk alul, ahelyett, hogy sajnálnánk, hogy nem látja ezt a videóüzenetet, a következő kód használatával :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Következtetés
A legtöbb HTML5 elemhez hasonlóan a forrás- és videóelemek böngészőtámogatása jelenleg is hiányos. Jelenleg nagy vita folyik arról is, hogy a forráselem megöli-e a Flash használatát, mint a legnépszerűbb módszert videótartalom webhelyekhez történő hozzáadására. Nem vagyok biztos benne, hogy ez teljesen megöli-e a Flash-t, de ennek ellenére igazságosnak tartom azt mondani, hogy itt marad, és tisztább, könnyebb megközelítést nyújt a webfejlesztőknek a videók beágyazásához.
