HTML5 videók 10 dolog tervezőnek tudnia kell

A HTML5 forradalom izgalmas webes tervezők a világ minden területén. Az új specifikációk több tucat elemet és attribútumot támogatnak a szemantikus weboldalak létrehozásához. Ezek az új funkciók magukban foglalják a hang- és videofájlok multimédiás címkéit.

Az elmúlt években a Flash-alapú médialejátszó több, mint elegendő ahhoz, hogy az interneten közvetítse ezt a technológiát, és még mindig szükséges a régi böngészők támogatásához. De szerencsére a modern szabványok előrehaladtak, és a HTML5 videó felvétele több tucat új lehetőséget nyit meg.

Ebben az útmutatóban szeretnék bemutatni a HTML5 videó webes bemutatását. Bizonyos gyakorlatokra lesz szükség, hogy megértsük a böngésző natív böngészőjét és minden funkcióját. És a legjobb módja annak, hogy megismerkedjünk a fejbe merüléssel!

1. A média típusai

Amikor egy flash videó lejátszóval dolgozik, túlságosan gyakori, hogy minden videó formátumot társít .flv-ban. Bár ez működik, a legtöbb flv-fájl nem tudja megőrizni a minőséget a fejlettebb fájlformátumok / kodekek közelében. 3 fontos videó típus van, amelyeket a HTML5 támogat: MP4, WebM és Ogg / Ogv. Az MPEG-4 fájl típusát általában a H.264 kódolja, amely lehetővé teszi a lejátszást harmadik fél Flash lejátszókban. Ez azt jelenti, hogy nem kell egy .flv videofájlt megtartania a visszaállítási módszer támogatásához! A WebM és az Ogg két újabb, a HTML5 videóhoz kapcsolódó fájltípus. Az Ogg a Theora kódolást használja, amely a nyílt forráskódú szabványos hangfájlformátumon alapul. Ezeket egy .ogg vagy .ogv kiterjesztéssel lehet elmenteni.

A WebM a Google által kiadott projekt, melyet a WebM Projekt honlapján olvashat. A formátumot már támogatja az Opera, a Google Chrome, a Firefox 4+ és a legutóbb az Internet Explorer 9. Ez a webes szakemberek még mindig ismeretlenek, de a WebM a webes videofelvétel vezető videója.

2. Böngésző támogatás

Tehát melyik fájltípusra van szüksége a webhelyéhez? Ideális esetben mindhárom jó lenne, ha teljes támogatási spektrumot biztosítanak. Ez azonban nem reális, és valójában mindössze két bázist fedezhet fel. Íme a böngésző működésének bontása:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - Nincs HTML5, csak a Flash!

Ha emlékszel, korábban már említettem, hogy a legtöbb flash videó lejátszó támogatja az MP4-fájlokat, amíg azok a H.264-ben vannak kódolva. Mint ilyen, mindegyik böngésző beágyazza az MP4 + Flash-et végső megoldásként. Ez azt jelenti, hogy csak létre kell hoznia két különböző böngészők támogathatók. MP4 for Safari / IE9 és a választás a WebM vagy az Ogg között a többi számára.

Véleményem szerint nagyon ajánlom, hogy ragaszkodjak a WebM formátumhoz. A projekt mögött van néhány nagy név (nevezetesen a Google), és a HTML5 közösségben rengeteg vontatást szerzett. Az Ogg / Ogv támogatott, de valószínűleg elveszíti a népszerűségét a WebM kisebb fájlméreteire. Elolvashat egy kapcsolódó darabot a webes videó videójáról, amelyet Sean Golliher írt.

3. Egyszerű HTML5 videók beágyazása

Vessünk egy pillantást a minta kód beágyazásához szükséges szintaxisra. Minden amire szükségünk van, a HTML5 videócímke az egyes film URL-ekre hivatkozik.

Figyeljük meg a ellenőrzések és automatikus lejátszás az attribútumokat nem kell semmilyen értékkel beállítani. Én is a poszter attribútum, amely előtti felvételt készít a videó lejátszón a streaming előtt. Ez egy gyakori előnézet sok webes lejátszóval.

Kínálunk MP4 és WebM formátumokat a videó elemen belül. Ha egyikük sem tölthető be, akkor hibaüzenet jelenik meg a felhasználó számára, hogy frissítse böngészőjét.

4. Flash Fallback szolgáltatás

A fenti példa minden szabványnak megfelelő webböngésző számára tökéletes. Ugyanakkor azt is figyelembe kell vennünk, hogy a világ nem mindig a legmodernebb technológia. Támogatnunk kell a felhasználókat a Safari, a Mozilla Firefox és különösen az Internet Explorer régebbi verzióiban.

Ennek a legjobb módja a Flash-lejátszó. Ezeket a beágyaz vagy tárgy címkék egy harmadik fél .swf fájljához. A JW Player és a Flowplayer két ingyenes, nyílt forráskódú megoldás, amit figyelembe vehet. De nézd meg a prémium videó lejátszókat az ActiveDen-en, ami olyan olcsó, mint $ 15- $ 20.

Most csípjük meg a fenti kódot, hogy tartalmazzon egy visszamenőleges Flash-lejátszót, hogy támogassa majdnem minden böngészőt.

5. Mobileszköz-támogatás

Ez a téma még mindig nagyon vitatott, mivel a mobilipar olyan fiatal. Az Apple támogatta az MP4-t Mac és iOS eszközökön. Ez azt jelenti, hogy a szabványos video-felhasználói felületen az iPad, iPhone vagy iPod Touch alkalmazásban az .mp4 videofájlokat streamelheti. Ez a piaci részesedés nagy részét fedi le.

Az utóbbi időben az Android készülékek nehezen tudtak elérni ezt az azonos szintű támogatást. A Google azonban végül elfogadta az .mp4 webes adatfolyamot, amely most szinte valamennyi mobilfelhasználót használ. És mivel a Flash itt nem opció, az MP4 a legjobb megoldás. Ezért szeretné először beágyazni a .mp4 kódot, hogy az iOS eszközök azonnal felismerjék a fájlt.

6. Safari felhasználói ügynök

Egy hiba, amelyet meg kell említeni, a Flash-játékosok és a natív HTML5 .mp4-es adatfolyamok között létezik egy Safari-on. Mivel a böngésző mindkét fájlt támogatja, előfordulhat, hogy a Flash5 helyett a HTML5 videófolyamot nem sikerül elérni. Ennek a nagyszerű blogbejegyzésnek köszönhetően azonban könnyen megváltoztathatja a böngésző felhasználói ügynökét.

Ez arra kényszeríti a weboldalt, hogy felismerje a böngészőt egy másik eszközön futónak. Valószínűleg az iPad-et választaná, amely NEM támogatja a Flash-lejátszást. Ez az egyetlen fontos probléma, amellyel az MP4 natív & flash lejátszási módszerek tesztelése során felmerülhet.

7. Játékvezérlők kezelése

Higgye el vagy sem, van olyan módszer is, amellyel manipulálhatja a HTML5 videolejátszó vezérlését. Mindezt a JavaScript-ben lehet elvégezni a nyitott módszerekből. Túl sok a lista a listához, de a részletekért próbálkozzon a W3C adathordozó elemén.

Ahhoz, hogy általános elképzelésed legyen, az Opera dev blogja néhány rövid bemutatót írt, amelyek nagyszerűek a kezdőknek. Még ha még soha nem vette fel a JavaScript-et vagy a jQuery-t, még mindig egyszerű, hogy eltalálja ezt a földet. Felhívhatunk a videó adathordozó specifikus attribútumaira, például tompított vagy aktuális idő. Ezután a kritériumok alapján végezheti el a műveleteket (elhomályosíthatja a hátteret, megjelenítheti a hirdetéseket), a manipulálásával a DOM-ot a jQuery-ben.

Ugyanez a fejlesztő az Opera-cikkben egy írott videolejátszó működő demóját nyújtja. A saját felhasználói felület vezérlésének testreszabásának lehetősége kiemelkedő. Ez csak azt mutatja, hogy mennyire erős a HTML5 videó.

8. Video formátum konverzió

Ez egy másik nagy probléma, amely valószínűleg összezavarja a kevésbé technikailag értelmes személyeket. Csak azt szeretné, hogy webhelyét feltöltsék, és most már a videók konvertálásával kell foglalkozniuk? Hát ez tényleg nem olyan nehéz.

A legnagyobb prioritású MP4 kezeléséhez használhatja a HandBrake-t, amely egy szabad, nyílt forráskódú megoldás, amely mindhárom fő operációs rendszeren fut. Támogatja a H.264-et néhány más kodekkel együtt, ami a legjobb választás a freebie felhasználók számára. Ha megvan a pénzed, hogy ki lehessen dobni, ajánlom a Xilisoft konvertert, amely a Mac App Store-ban található, csak 40 dolláros élettartamra.

Úgy néz ki, mintha a WebM útvonal sokkal könnyebbé teszi az életet. A Miro Video Converter egy Windows és OS X ingyenes eszköz, amely kiváló minőségű WebM fájlokat hoz létre. Az Ogg Theora kódolást is megteheti, ami nagyon jó minőségű.

9. Web-lejátszó építése

A HTML5 specifikációjú videó formátumok még mindig újak a fejlesztőknek. Nyílt protokollok várják, hogy az egyéni vezérlések, csúszkák, lejátszási / szüneteltetési ikonok stb..

A kód egy kicsit intenzív az újonnan érkezők számára, mivel fejlett CSS célzást és egy kicsit formális jQuery-t igényel. Vannak más keretek is, amelyekre épülhet, és amelyek már személyre szabott játékos designt kínálnak. Hasonlóképpen ez a diavetítés bemutatása nagyszerű bevezetés a HTML5 videolejátszó építéséhez.

HTML5 videolejátszó építése

10. VideoJS könyvtár

A VideoJS valószínűleg a kedvenc megoldásom a HTML5 videolejátszóknak. Csak annyit kell tennie, hogy az önálló hostelt és a CSS stíluslapot tartalmazza a dokumentumban. Ezután írja be a szabványos HTML5 videó kódot néhány további osztályozással a hámozáshoz. Az alábbi minta kódját adtam hozzá:

Ha egy WordPress blogot futtat, megpróbálhatja az egyéni WP plugint is. Automatikusan tartalmazza a js / css könyvtárat azon oldalakon, ahol HTML5 videót jelenít meg. Ezt mindegyik posta vagy oldalszerkesztő segítségével rövid kódok segítségével teheti meg (lásd itt).

Következtetés

Remélem, hogy ez a bevezető útmutató felkeltheti érdeklődését a webes videó jövőjével szemben. Ha több felhasználó fordul a mobilhoz, fontos, hogy az ilyen típusú médiákhoz HTML5 szabványokat fogadjanak el. Az internetet egyszerűbbé kell tenni, hogy a fejlesztők sokkal gyorsabban tudják teljes mértékben támogatott megoldásokat készíteni. Szeretnénk hallani ötleteit és javaslatait a HTML5 videó jövőjéről. Ha meg szeretné osztani, kérjük, hagyjon észrevételt az alábbi hozzászólási területen.