A HTML5 használata a videók megjelenítéséhez az aktuális böngészőkben

Saját HTML 5 videó tárolása vs. A YouTube használata

A YouTube nagyszerű webhely. Ez megkönnyíti a videók beágyazását weboldalak gyorsan, és néhány kisebb kivételtől eltekintve meglehetősen zökkenőmentesen hajtja végre ezeket a videókat. Ha felteszel egy videót a YouTube-ra, akkor eléggé biztos lehetsz abban, hogy bárki meg tudja nézni.

De a YouTube-nak a videók beágyazásához van néhány hátránya

A legtöbb probléma a Youtube a fogyasztói oldalon, nem pedig a tervező oldalán, például:

• Lassú keresés és indexelés
• Szerver leállások
• A tartalmat (látszólag) önkényesen távolítják el
• Túl sok a rossz tartalom

De van néhány oka annak, hogy a YouTube rossz a tartalomfejlesztők számára is, többek között:

• 10 perces videók maximális hossza (ingyenes fiókokhoz)
• Gyenge feltöltési teljesítmény
• A YouTube korlátlan használati jogot szerez a videódra
• Bármely YouTube-felhasználó korlátlan használati jogot kap a videódra

A HTML5 videó némi előnyt nyújt a YouTube-hoz képest

Használata HTML5 A videó lehetővé teszi a videó minden aspektusának vezérlését, attól, hogy ki tekintheti meg, mennyi ideig, mit tartalmaz a tartalom, hol tárolják és hogyan teljesít a szerver. És HTML5 lehetőséget ad arra, hogy a videódat annyi formátumban kódolja, amennyire szüksége van, hogy megbizonyosodjon arról, hogy a lehető legtöbb ember megtekintheti-e. Ügyfeleinek nincs szüksége pluginra, és nem kell megvárniuk, amíg a YouTube kiad egy újabb verziót.

Természetesen a HTML5 videó néhány hátrányt kínál

Ezek tartalmazzák:

• Legalább három különböző kodekben kell kódolnia a videót.
• A nem támogató böngészők biztosításához be kell illesztenie néhány JavaScript-et HTML5 működni fog.
• A szerverének képesnek kell lennie a videók tárolására vonatkozó sávszélesség-követelmények kezelésére.

Gyors áttekintés a videotámogatásról az interneten

Videó hozzáadása a weboldalakhoz régóta nehéz folyamat. Olyan sok dolog tévedhetett:

• Először a címke segítségével beágyazhatod a videódat az oldaladba. DE az a címke elavult egy másik címke javára. Néhány böngésző egyébként soha nem támogatta jól.
• Tehát átáll a tag, de a régebbi böngészők nem támogatják, és az újabb böngészők vázlatosan támogatják.
• Akkor azt gondolja Vaku! És kódold a videódat FLV fájlként. De Vaku a Windows eszközökön már nem támogatott.
• Tehát úgy dönt, hogy feltölti videódat egy olyan videóbeágyazó webhelyre, mint a YouTube, de akkor felmerülnek a YouTube-mal kapcsolatos kérdések, amelyeket megvitattunk.
• Végül úgy dönt, hogy a HTML5-et választja, de az Internet Explorer nem támogatja (csak az Internet Explorer 9-ig). És még akkor is, ha két videokodek szabvány támogatott, és csak egy böngésző tudja használni mindkettőt.

Tehát mit kellene tennie? A videókról való lemondás a legtöbb webhely számára már nem lehetséges, mivel a videó egyre fontosabbá válik. És sok webhely sikeresen átállt a videóra.

A cikk következő oldalai bemutatják, hogyan lehet videót hozzáadni a működő weblapokhoz Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 és 4, iPhone és Android, valamint Internet Explorer 7 és 8. Szükség esetén megkapja azokat a kulcsokat is, amelyekhez hozzá kell adnia más régebbi böngészők támogatását.

Készítse el és szerkessze a videót

Az első dolog, amire szüksége van, amikor videót tesz fel egy weboldalra, az a tényleges videó. Vagy folyamatosan fényképezhet és utána szerkeszthet egy funkció létrehozásához, vagy szkriptelheti és idő előtt megtervezheti. Bármelyik módszer is jól működik, ez csak az, amiben jól érzed magad. Ha nem tudja, milyen típusú videót kell készítenie, nézze meg ezeket az ötleteket az Asztali videó útmutatóban:

• Családi videoprojektek
• Marketing és promóciós videók
• Videó virtuális túrák
• Hogyan lehet videók
• Esküvői videók

Tanulja meg, hogyan kell kiváló minőségű videókat rögzíteni

Győződjön meg róla, hogy tudja, hogyan kell beltéren és szabadban rögzíteni, valamint hogyan kell hangot rögzíteni. A világítás is nagyon fontos - a túl világos felvételek ártanak a szemnek, a túl sötét pedig csak sárosnak és szakszerűtlennek tűnik. Még akkor is, ha csak 30 másodperces videót tervez a webhelyén, annál jobb minőségű, annál jobb tükröződik a webhelyén.

Ne feledje azt sem, hogy a szerzői jog minden olyan hangra vagy zenére vonatkozik (valamint a stock footage-ra), amelyet érdemes használni a videójában. Ha nincs hozzáférése egy olyan baráthoz, aki írhat és lejátszhat neked egy dalt, meg kell találnia jogdíjmentes zene hogy a háttérben játsszon. Vannak olyan helyek is, amelyeken felvételeket készíthet a videókhoz.

A videó szerkesztése

Nem számít, hogy milyen szerkesztő szoftvert használ, csak addig, amíg ismeri és hatékonyan tudja használni. A Gretchennek, az Asztali videokalauznak van néhány professzionális videoszerkesztő tippje, amelyek segítségével szerkesztheti videóit úgy, hogy azok jól nézzenek ki.

Videójának mentése MOV vagy AVI fájlba (vagy MPG, CD, DV)

Az oktatóanyag további részében feltételezzük, hogy a videódat valamilyen kiváló minőségű (nem tömörített) formátumban mentették el, például AVI vagy MOV. Míg ezeket a fájlokat a jelenlegi állapotában is használhatja, a videóval kapcsolatos összes problémába ütközik, amelyet már megvitattunk. A következő oldalak elmagyarázzák, hogyan lehet a fájlt három típusra konvertálni, hogy azt a legtöbb böngésző láthassa.

Konvertálja a videót Ogg-ba Firefox számára

Az első formátum, amelyre konvertálunk, az Ogg (néha Ogg-Theora néven). Ezt a formátumot a Firefox 3.5, az Opera 10.5 és a Chrome 3 egyaránt megtekintheti.

Sajnos, bár az Ogg rendelkezik böngészőtámogatással, sok jól ismert videoprogram, amelyet megvásárolhat (Adobe Media Encoder, QuickTime stb.), Nem kínál Ogg átalakítási lehetőséget. Tehát a videó Ogg-vé konvertálásának egyetlen módja az, ha egy konverziós programot talál az interneten.

Konverziós opciók

Van egy Media-Convert nevű online eszköz, amely azt állítja, hogy a video (és audio) különböző formátumait más video (és audio) formátumokká konvertálja. Amikor megpróbáltuk a 3 másodperces tesztvideóval, nem tudtuk rávenni, hogy működjön a Mac gépemen. De lehet, hogy jobb szerencséd van. Ennek az oldalnak az az előnye, hogy ingyenes.

Néhány egyéb eszköz, amelyet találtunk:

• Miro Video Converter (Windows Macintosh): Ennek a programnak az az előnye, hogy mind Ogg-ra, mind MP4-re (H.264) konvertál, és nyílt forráskódúvá vált.
• Ingyenes Video Converter: Úgy gondoljuk, hogy ennek Windows és Macintosh verziója is van, de a webhelyükről nehéz volt megmondani
• Egyszerű Theora kódoló (Macintosh): Ezt szoktuk használni.

Miután a videódat Ogg formátumban mentette, mentse el egy webhelyére, és lépjen a következő oldalra, hogy más böngészőkhöz más formátumokká alakítsa át.

Konvertálja a videót MP4-re a Safari és az Internet Explorer programhoz

A videót a következő formátumba kell konvertálni: MP4 (H.264 videó), így az Internet Explorer 9 és újabb verziókon, a Safari 3 és 4, valamint az iPhone és az Android rendszereken is lejátszható.

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 rendelkezik videoszerkesztővel. Ha van Adobe Premiere használhatja az Adobe Video Encoder programot, vagy ha van QuickTime Pro is, amely szintén működik. Az előző oldalon tárgyalt átalakítók közül sokan videókat is MP4-re konvertálnak.

• MediaConvert: Online AWS eszköz.
• Miro Video Converter (Windows Macintosh): Ennek a programnak az az előnye, hogy mind Ogg-ra, mind MP4-re (H.264) konvertál, és nyílt forráskódúvá vált.
• SZUPER (Windows): Sokféle fájltípust konvertál MP4-be
• Ingyenes Video Converter: Úgy gondoljuk, hogy ennek Windows és Macintosh verziója is van, de a webhelyükről nehéz volt megmondani.

Adja hozzá a videó elemet a weboldalához

1. Készítse el a weblapját a szokásos módon:

2. A test belsejében helyezze el a
3. Döntse el, milyen tulajdonságokkal rendelkezik a videó: Javasoljuk a vezérlők és az előzetes betöltés használatát. Használja a poszter opciót, ha a videójának nincs jó első jelenete.
   automatikus lejátszás - a letöltés kezdetéhez
4. vezérlők - lehetővé teszik az olvasók számára a videó irányítását (szünet, visszatekerés, gyors előre)
5. ciklus - kezdje a videót az elejétől a végéig
6. előzetes betöltés - töltse le előre a videót, hogy gyorsabban elkészüljön, amikor az ügyfél rákattint
7. poszter - adja meg azt a képet, amelyet a videó leállításakor használni szeretne
8. Ezután adja hozzá a videó két verziójának (MP4 és OGG) forrásfájljait a
9. Nyissa meg az oldalt a Chrome 1-ben, a Firefox 3.5-ben, az Opera 10-ben és / vagy a Safari 4-ben, és ellenőrizze, hogy megfelelően jelenik-e meg. Legalább a Firefox 3.5 és a Safari 4 rendszereken kell tesztelnie - mivel mindegyikük más-más kodeket használ.

Ez az. Miután ezt a kódot megadta, lesz egy videó, amely a Firefox 3.5, a Safari 4, az Opera 10 és a Chrome 1 rendszerekben működik. De mi van az Internet Explorerrel?

Nagyon egyszerű a HTML 5 segítségével videót hozzáadni a weboldalakhoz. A legtöbb modern böngésző támogatja a HTML 5 videót, bár nem mindegyik támogatja ugyanúgy. De ez azt jelenti, hogy ha videódat Ogg és MP4 formátumban is elmented, csak négy vagy öt sornyi HTML-t írhatsz, hogy a legtöbb modern böngészőben megjelenjen (kivéve az Internet Explorer 8-at). Itt van, hogyan:

Írja be a HTML 5 doctype jelölőt, hogy a böngészők tudják, hogy elvárják a HTML 5-t:

1. Készítse el a weblapját a szokásos módon:

2. A test belsejében helyezze el a
3. Döntse el, milyen tulajdonságokkal rendelkezik a videó: Javasoljuk a vezérlők és az előzetes betöltés használatát. Használja a poszter opciót, ha a videójának nincs jó első jelenete.
   automatikus lejátszás - a letöltés kezdetéhez
4. vezérlők - lehetővé teszik az olvasók számára a videó irányítását (szünet, visszatekerés, gyors előre)
5. ciklus - kezdje a videót az elejétől a végéig
6. előzetes betöltés - töltse le előre a videót, hogy gyorsabban elkészüljön, amikor az ügyfél rákattint
7. poszter - adja meg azt a képet, amelyet a videó leállításakor használni szeretne
8. Ezután adja hozzá a videó két verziójának (MP4 és OGG) forrásfájljait a
9. Nyissa meg az oldalt a Chrome 1-ben, a Firefox 3.5-ben, az Opera 10-ben és / vagy a Safari 4-ben, és ellenőrizze, hogy megfelelően jelenik-e meg. Legalább a Firefox 3.5 és a Safari 4 rendszereken kell tesztelnie, mivel mindegyikük más-más kodeket használ.

Ez az. Miután ezt a kódot megadta, lesz egy videó, amely a Firefox 3.5, a Safari 4, az Opera 10, az Internet Explorer 9+ és a Chrome 1 rendszerekben működik.

Tesztelje minél több böngészőben

Nyugalma érdekében a régebbi böngészőkben is tesztelnie kell, hogy mit csinálnak, különösen, ha sok olvasója régebbi böngészőket használ.

A videooldalak tesztelése kritikus fontosságú, ha sikeres elindítást szeretne. Ügyeljen arra, hogy tesztelje oldalát a webhely legnépszerűbb böngészőiben és verzióiban.

Megállapítottuk, hogy bár lehetséges olyan eszközöket használni, mint a BrowserLab és az AnyBrowser, a videók teszteléséhez, ez nem annyira megbízható, mint az oldal böngészőben történő felhozása. Ha ezt megteszi, akkor valóban láthatja, hogy működik-e vagy sem.

Mivel minden erőfeszítést megtett, hogy a videódat több formátumban kódolja, tesztelned kell, hogy több böngészőben jelenjen meg. Ez azt jelenti, hogy legalább Firefoxban, Safariban és IE-ben kell tesztelnie.

Nyugalma érdekében a régebbi böngészőkben is tesztelnie kell, hogy mit csinálnak, különösen, ha sok olvasója régebbi böngészőket használ.

A videó működése az idősebb böngészőkben

Mint minden weboldal esetében, először is meg kell fontolnia, mennyire fontos, hogy ezek a böngészők működjenek. Ha ügyfeleinek 90% -a használja a Netscape alkalmazást, akkor rendelkeznie kell tartalék tervvel. De ha kevesebb, mint 1%, akkor ez nem számít annyira.

Miután eldöntötte, hogy mely böngészőket próbálja támogatni, a legegyszerűbb az, ha egyszerűen létrehoz egy alternatív oldalt a videó megtekintéséhez. Azon az alternatív oldalon beágyazna egy videót a HTML 4 használatával. Ezután vagy használja a böngésző észlelésének valamilyen formáját, hogy átirányítsa őket oda, vagy csak adjon hozzá egy linket az adott oldalra ezen az oldalon.