A HTML5 videocímke segítségével könnyedén felveheti a videót weboldalaira. De ha könnyűnek tűnik a felszínen, sok dolog van, amire szükséged van ahhoz, hogy feltöltsd a videódat. Ez a bemutató végigvezeti Önt a HTML5-ben létrehozott oldal létrehozásával kapcsolatos lépésekkel, amelyek minden modern böngészőben futtatják a videót.
- Saját HTML5 videó vagy a YouTube használata
- A videó támogatásának gyors áttekintése az interneten
- Videó létrehozása és szerkesztése
- Konvertáld a videót Ogg for Firefox-ra
- Konvertálja a videót MP4-re a Safari-hoz
- Konvertálja a videót FLV-re az Internet Explorer programhoz
- Adja hozzá a videóelemet weboldalához
- Adja hozzá a JavaScriptet és a Flash Player-t, hogy az Internet Explorer működjön
- Tesztelj a lehető legtöbb böngészőben
Tárolja saját HTML 5 videóját a YouTube használatával szemben
A YouTube egy nagyszerű webhely. Könnyűvé teszi a videók gyors beillesztését a weboldalakba, és néhány kisebb kivétellel meglehetősen zökkenőmentes a videók végrehajtása során. Ha közzétesz egy videót a YouTube-on, meglehetősen biztos abban, hogy bárki láthatja.
De a YouTube-nak a videók beágyazásához bizonyos hátrányai vannak
A legtöbb YouTube-probléma a fogyasztói oldalon van, nem pedig a tervező oldalán, olyan dolgok, mint például:
- Lassú keresés és indexelés
- Kiszolgálói üzemszünetek
- A tartalmat (látszólag) önkényesen eltávolították
- Túl sok rossz tartalom
De vannak olyan okok is, amelyek miatt a YouTube rossz a tartalomfejlesztők számára is, többek között:
- 10 perces maximális idő a videókhoz (ingyenes számlákhoz)
- Szegény feltöltési teljesítmény
- A YouTube korlátlan használati jogot szerez a videóidnak
- Minden YouTube-felhasználó korlátlan használati jogot szerez a videóidnak
A HTML5 videó bizonyos előnyökkel jár a YouTube-on
A HTML5 videó használatával lehetővé válik, hogy irányítsa a videó minden egyes elemét, arról, hogy ki láthatja azt, mennyi ideig tart, hol tartja a tartalmat, hol tárolja és hogyan működik a szerver. A HTML5 videó pedig lehetőséget nyújt a videó formátumának kódolására annyi formátumban, amennyit csak akar, hogy megbizonyosodjon róla, hogy a maximálisan megtekinthető. Az ügyfeleknek nincs szükség pluginra, vagy várni, amíg a YouTube újabb verziót ad.
Persze, a HTML5 videó némi hátrányt jelent
Ezek tartalmazzák:
- A videódat legalább három különböző kodeknél kell kódolni
- Bizonyos JavaScript-t kell tartalmaznia annak biztosítására, hogy a HTML5-t nem támogató böngészők működjenek
- A kiszolgálónak képesnek kell lennie arra, hogy kezelje a videók tárhelyének sávszélességi követelményeit
Olvass tovább az alábbiakban
02. oldal, 10A videó támogatásának gyors áttekintése az interneten
A videó weboldalakhoz való hozzáadása régóta nehéz folyamat. Olyan sok olyan dolog volt, ami tévedhet:
- Először a a videód beillesztéséhez az oldaladba. DE ez a címke elutasítva egy másik címke javára. Néhány böngésző pedig soha nem támogatta.
- Így váltasz a tag, de a régebbi böngészők nem támogatják, és az újabb böngészők vázlatosak a támogatásban.
- Akkor azt hiszed, Flash! És kódolja a videódat FLV fájlként. De a Flash nem támogatott sok mobileszközön, és sokan gyűlölik a Flash-et, függetlenül attól, hogyan használják (a válaszadók 25% -a megkérdezte, hogy érzi magát a Flash-ről).
- Úgy döntesz, hogy feltöltöd a videódat egy videó beágyazási webhelyre, például a YouTube-ra, de akkor a YouTube-val kapcsolatos kérdéseid vannak.
- Végül úgy dönt, hogy megy a HTML5-lel, de az Internet Explorer nem támogatja (nem az Internet Explorer 9-ig). És még ha igen, akkor két videokodek szabványt támogatnak, és csak egy böngésző használható mindkettő számára. Böngésző támogatás videokodekhez és konténerekhez
Mit kéne tenned? A videó feloldása már nem lehetséges a legtöbb webhely esetében, mivel a videó egyre fontosabbá válik. És sok webhely sikeresen kapcsolódott a videóhoz.
Ennek a cikknek a következő oldalai felvázolják Önt, hogyan lehet videót hozzáadni a Firefox 3.5, az Opera 10.5, a Chrome 3.0, a Safari 3 és a 4, az iPhone és az Android, a Flash és az Internet Explorer 7 és a 8 operációs rendszert használó weboldalakhoz. a szükséges kulcsokat további régebbi böngészők támogatásához is hozzá kell adni.
Olvass tovább az alábbiakban
03. oldal, 10Videó létrehozása és szerkesztése
Az első dolog, amire szükséged van, amikor videót helyezsz egy weboldalra, a tényleges videó. Folyamatosan készíthet felvételt, majd később szerkesztheti a funkció létrehozását, vagy szkriptet készíthet, és előre is tervezheti. Bármelyik módon jól működik, csak annyira, amilyennek tetszik. Ha nem tudja, hogy milyen típusú videót kell készítenie, nézze meg ezeket az ötleteket az Asztalos videókeresőből:
- Családi videó projektek
- Marketing és promóciós videók
- Videó virtuális túrák
- Hogyan készítsünk videókat
- Esküvői videók
Tudjon meg többet a kiváló minőségű videó rögzítéséről
Győződjön meg róla, hogy tudja, hogyan kell rögzíteni beltéren és kültéren, valamint hogyan rögzítheti a hangot. A világítás is nagyon fontos - túl világos lövések sértik a szemét, és túl sötétek csak sárosak és szakszerűtlenek. Még ha csak 30 másodperces videót tervezel webhelyeden, minél jobb minőségű, annál jobb lesz a weboldalod.
Ne felejtsük el, hogy a szerzői jogok minden olyan hangra vagy zenére (valamint az állományfájlra) vonatkoznak, amelyeket a videódban használni fog. Ha nem férhet hozzá olyan ismerőshöz, aki képes írni és játszani egy dalt, akkor meg kell találnia a jogdíjmentes zenét a háttérben való lejátszáshoz. Vannak olyan helyek is, amelyekkel felvételt készíthet a videókhoz.
A videó szerkesztése
Nem számít, milyen szerkesztőprogramot használ, csak addig, amíg ismered és hatékonyan használod. Gretchen, az Asztali Videó Útmutatónak van néhány professzionális videószerkesztési tippje, amely segít szerkeszteni a videóidat úgy, hogy jól nézzen ki.
Mentse a videót egy MOV vagy AVI (vagy MPG, CD, DV)
A bemutató további részében azt feltételezzük, hogy a videódat valamilyen jó minőségű (nem tömörített) formátumban, például AVI vagy MOV formátumban menti el. Bár ezeket a fájlokat használhatod úgy, ahogy vannak, akkor a videóval kapcsolatos összes problémával foglalkozol, amit már megvitattunk. Az alábbi oldalak bemutatják, hogyan alakíthatja át a fájlt három típusba, így a legtöbb böngésző megtekinthető.
04. oldal, 10Konvertáld a videót Ogg for Firefox-ra
Az első formátum, amelyet át fogunk alakítani, Ogg (néha Ogg-Theora). Ez a formátum az, amelyet a Firefox 3.5, az Opera 10.5 és a Chrome 3 képes megtekinteni.
Sajnálatos módon, bár az Ogg böngészővel rendelkezik, sok jól ismert videomegjelenítés (Adobe Media Encoder, QuickTime stb.) Nem kínál Ogg konverziós lehetőséget. Tehát az egyetlen módja annak, hogy a videódat Ogg-be konvertáljuk, megtalálja a konverziós programot az interneten.
Konverziós opciók
Van egy online eszköz, a Media-Convert, amely azt állítja, hogy a különféle video (és audio) formátumokat más video- (és audio) formátumokká alakítja át. Amikor kipróbáltam a 3 másodperces tesztfelvétellel, nem tudtam működni a Mac-en. De jobb szerencsére lehet. Ez a weboldal előnye, hogy ingyenes.
Néhány egyéb eszköz megtalálható:
- Miro Video Converter (Windows Macintosh) - Ez a program előnyös mind az Ogg, mind az MP4 (H.264) és nyílt forráskódú.
- Koyote Video Converter (Windows)
- Ingyenes Video Converter Azt hiszem, ez egyaránt Windows és egy Macintosh verzió, de nehéz volt megmondani a saját honlapján
- Egyszerű Theora Encoder (Macintosh) - ez az, amit hajlamosak vagyunk használni.
Miután a videódat az Ogg formátumba mentette, mentse el egy helyre a webhelyén, és menjen a következő oldalra, hogy azt más böngészők formátumává alakítsa.
Olvass tovább az alábbiakban
05. oldal, 10Konvertálja a videót MP4-re a Safari-hoz
A következő formátumot, amellyel a videót be kell konvertálni, az MP4 (H.264 videó), így a Safari 3 és 4, valamint az iPhone és az Android is lejátszható. Plusz, a H.264 videók könnyen konvertálhatók FLV fájlokká a Flash-en való megtekintésre.
Ez a formátum könnyebben elérhető a kereskedelmi termékekben, és valószínűleg már van olyan programja, amely MP4-re konvertál, ha van videószerkesztője. Ha rendelkezik Adobe Premiere programmal, használhatja az Adobe Video Encoder programot, vagy ha a QuickTime Pro is működik. Az előző oldalon tárgyalt átalakítók közül sok a videókat is MP4-be konvertálja.
- MediaConvert - Online AWS eszköz.
- Miro Video Converter (Windows Macintosh) - Ez a program előnyös mind az Ogg, mind az MP4 (H.264) és nyílt forráskódú.
- SUPER (Windows) - sok különböző fájltípust konvertál MP4 és FLV formátumba
- Ingyenes Video Converter Azt hiszem, ez egyaránt Windows és egy Macintosh verzió, de nehéz volt megmondani a saját honlapján.
Mentsd el az MP4 fájlt a webhelyedre, majd konvertálni kell Flash for Internet Explorer használatára.
06. oldal, 10Konvertálja a videót FLV-re az Internet Explorer programhoz
A legegyszerűbb módja annak, hogy a videókat FLV-be konvertáljuk, magának a Flash-nek a használatát. Így konvertáljuk a videóimat Flash-be. De ha nincs Flash, akkor itt két népszerű eszköz a fájlok FLV-be konvertálásához:
- SUPER (Windows) - sok különböző fájltípust konvertál MP4 és FLV formátumba
- ffmpegX (Macintosh) - sok különböző fájltípust konvertál Mp4 és FLV formátumba.
Mentse el az FLV fájlt a webhelyére, és a következő oldal megmutatja, hogyan kell írni a HTML-t, hogy lejátszhassa a videókat.
Olvass tovább az alábbiakban
07. oldal, 10Adja hozzá a videóelemet weboldalához
A HTML 5 használatával nagyon könnyű a videofájlok weboldalakhoz való hozzáadását. A legtöbb modern böngésző támogatja a HTML 5 videót, bár nem mindegyikük ugyanúgy támogatja. De ez azt jelenti, hogy ha a videót mind Ogg, mind MP4 formátumban mentheti, akkor csak négy vagy öt sor HTML-kódot tud írni, hogy megjelenjen a legtöbb modern böngészőben (az Internet Explorer 8 kivételével). Itt van, hogyan:
Írja be a HTML 5 dokkolójelet, így a böngészők tudják, hogy elvárják a HTML 5-et:
- Hozzon létre weboldalt, ahogyan azt általában létrehozná:
- A test belsejében helyezd a
- Döntsd el, milyen attribútumokat szeretnél a videóodnak: Javasoljuk, hogy használjon vezérlőket és előtöltést. Használja a plakát opciót, ha a videódnak nincs jó első jelenete.
- automatikus lejátszás - a letöltés megkezdéséhez
- vezérlők - engedélyezheti az olvasók számára a videó vezérlését (szüneteltetés, visszacsévélés, gyors előre)
- hurok - indítsa el a videót a kezdetektől, amikor véget ér
- előtöltés - előtelepítse a videót, hogy gyorsabban készen álljon, amikor az ügyfél rákattint
- poszter - határozza meg a használni kívánt képet a videó leállításakor
- Ezután adja hozzá a videó két verziójához (MP4 és OGG) a forrásfájlokat
- Nyissa meg az oldalt a Chrome 1-ben, a Firefox 3.5-ben, az Opera 10-ben és / vagy a Safari 4-ben, és győződjön meg arról, hogy helyesen jelenik meg. Legalább a Firefox 3.5-t és a Safari 4-et kell tesztelned, mivel mindegyikük eltérő codec-et használ.
Ez az. Miután megvan a kód a helyén, megjelenik egy videó, amely a Firefox 3.5, a Safari 4, az Opera 10 és a Chrome 1 programokban működik. De mi van az Internet Explorer programmal?
Az Internet Explorer nem tetszik a HTML 5 vagy a
A következő részben arról fogunk beszélni, hogy mit tehetünk, hogy az IE 8-at kedvezően játszhassunk a HTML 5 videócímkékkel, és megjeleníthetjük a videót. Használd a Flash-et.A jó hír az, hogy az IE 9 várhatóan támogatni fogja a HTML 5-et és a videót.
08. oldal, 10Adja hozzá a JavaScriptet és a Flash Player-t, hogy az Internet Explorer működjön
Lehet, hogy észrevette, hogy az előző oldal HTML-jében nem volt forrásvonal az FLV fájlhoz. És ha az Internet Explorer-ben tesztelte ezt az oldalt, akkor nem működne. Ez azért van, mert az Internet Explorer nem ismeri fel a HTML 5-öt, és nem tud lejátszani OGG vagy MP4 videókat natív módon. Annak érdekében, hogy az Internet Explorer 7 és a 8 működjön, meg kell játszania a videót Flash-ként. De több lépés van a munkához, mint az FLV fájl hozzáadásával.
1. lépés: Szerezzen Flash Video lejátszót a webhelyére
Javasoljuk, hogy szerezzen FlowPlayert, mert ez egy nyílt forráskódú Flash video lejátszó, amelyet telepíthet a webkiszolgálón, és használhatja, amikor Flash-videót játszik le. A FlowPlayer ingyenes verziója reklámokat helyez a videókba, de szükség esetén kereskedelmi licenceket is vásárolhat.
Kövesse a FlowPlayer webhelyén található utasításokat a FlowPlayer telepítéséhez a webhelyén. Dióhéjban 2 SWF-fájlt és JavaScript-fájlt telepít webhelyén. A HTML alján (a tag) egy sort ad hozzá:
De az Internet Explorer még mindig nem játssza le a videót, meg kell tanítani, hogyan ismerheti fel a HTML 5 címkéket.
2. lépés: Győződjön meg róla, hogy az Internet Explorer olvassa a HTML 5 címkéket
Van egy praktikus szkript a Google Code-ban, amelyet "HTML Shiv" -nek hívnak, amely segít az IE felismerni a HTML 5 elemeket. Tehát a
a HTML dokumentumot, amelyre hivatkozni szeretne. A legjobb, ha az IE feltételes megjegyzéseket csatolják, így más böngészők nem zavarják:
Oké, most IE fel fog ismerni
