Uporaba HTML5 za prikaz videa v trenutnih brskalnikih

Gostovanje lastnega HTML 5 Video vs. Uporaba YouTuba

YouTube je odlično spletno mesto. Omogoča enostavno vdelavo videa v Spletne strani hitro in z nekaj manjšimi izjemami je pri izvajanju teh videoposnetkov precej nemoteno. Če objavite videoposnetek na YouTubu, ste lahko povsem prepričani, da si ga bo lahko kdo ogledal.

Toda uporaba YouTuba za vdelavo videoposnetkov ima nekaj pomanjkljivosti

Večina težav z YouTube so na strani potrošnika in ne na strani oblikovalca, kot so:

• Počasno iskanje in indeksiranje
• Izpadi strežnika
• Vsebina se odstranjuje (navidezno) samovoljno
• Preveč slabe vsebine

Obstaja pa nekaj razlogov, zakaj je YouTube slab tudi za razvijalce vsebin, med drugim:

• 10-minutna največja dolžina videoposnetkov (za brezplačne račune)
• Slaba zmogljivost nalaganja
• YouTube pridobi neomejene pravice do uporabe vašega videoposnetka
• Vsak uporabnik YouTuba pridobi neomejene pravice do uporabe vašega videoposnetka

HTML5 Video daje nekaj prednosti pred YouTubeom

Uporaba HTML5 for video vam omogoča nadzor nad vsemi vidiki videoposnetka, od tega, kdo si ga lahko ogleda, kako dolgo je, kaj vsebuje vsebina, kje gostuje in kako strežnik deluje. In HTML5 vam daje možnost, da video kodirate v toliko formatih, kolikor ga potrebujete, da si ga lahko ogleda največje število ljudi. Vaše stranke ne potrebujejo vtičnika ali čakajo, da YouTube izda novejšo različico.

Seveda HTML5 Video ponuja nekaj pomanjkljivosti

Tej vključujejo:

• Video moraš kodirati v vsaj tri različne kodeke.
• Vključiti morate nekaj JavaScript, da zagotovite brskalnike, ki ne podpirajo HTML5 bo delovalo.
• Vaš strežnik mora biti sposoben obravnavati zahteve glede pasovne širine gostovanja videoposnetkov.

Kratek pregled video podpore v spletu

Dodajanje videa na spletne strani je že dolgo težaven postopek. Toliko stvari bi lahko šlo narobe:

• Najprej uporabite za vdelavo videoposnetka v svojo stran. AMPAK ta oznaka je opuščena v korist druge oznake. In nekateri brskalniki ga tako ali tako nikoli niso dobro podpirali.
• Torej preklopite na oznaka, vendar je starejši brskalniki ne podpirajo, novejši brskalniki pa so podprti.
• Potem pomisliš Flash! In video kodirajte kot datoteko FLV. Ampak Flash ni več podprt v napravah Windows.
• Torej ste se odločili, da svoj video naložite na spletno mesto za vdelavo videoposnetkov, kot je YouTube, vendar imate težave z YouTubom, o katerem smo razpravljali.
• Končno se odločite za uporabo HTML5, vendar Internet Explorer tega ne podpira (šele Internet Explorer 9). Tudi če to storite, sta podprta dva standarda za video kodek in samo en brskalnik, ki lahko uporablja oba.

Torej, kaj naj bi naredil? Odpoved video posnetku za večino spletnih mest ni več mogoča, saj video postaja vse bolj pomemben. Veliko spletnih mest je uspešno prešlo na video.

Naslednje strani tega članka vas bodo vodile skozi postopek dodajanja videoposnetka na vaše spletne strani, ki delujejo v brskalnikih Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 in 4, iPhone in Android ter Internet Explorer 7 in 8. Po potrebi boste imeli tudi tipke, ki jih potrebujete za dodajanje podpore za druge starejše brskalnike.

Ustvarite in uredite svoj video

Prva stvar, ki jo potrebujete, ko želite postaviti video na spletno stran, je dejanski video. Lahko neprekinjeno snemate in nato urejate, da ustvarite funkcijo, ali pa jo scenarirate in načrtujete pred časom. Kakor koli že dobro deluje, je pač tisto, kar vam ustreza. Če ne veste, kakšno vrsto videoposnetka bi morali posneti, si oglejte te ideje v Namiznem video vodiču:

• Družinski video projekti
• Trženjski in promocijski videoposnetki
• Video navidezni ogledi
• Kako video posnetke
• Poročni video posnetki

Naučite se snemati visokokakovostni video

Prepričajte se, da znate snemati v zaprtih prostorih in na prostem ter snemati zvok. Zelo pomembna je tudi osvetlitev - presvetli posnetki poškodujejo oči, pretemni pa so videti samo blatni in nestrokovni. Tudi če nameravate na svojem spletnem mestu imeti samo 30-sekundni videoposnetek, višja kakovost je, bolje se bo odražal na vašem spletnem mestu.

Ne pozabite tudi, da avtorske pravice veljajo za vse zvoke ali glasbo (kot tudi zaloge), ki jih boste morda želeli uporabiti v svojem videoposnetku. Če nimate dostopa do prijatelja, ki bi lahko napisal in predvajal pesem za vas, jo boste morali najti glasba brez licenčnin igrati v ozadju. Obstajajo tudi mesta, na katerih lahko posnamete posnetke in jih dodate v svoje videoposnetke.

Urejanje video posnetka

Vseeno je, katero programsko opremo za urejanje uporabljate, če jo poznate in jo lahko učinkovito uporabljate. Gretchen, namizni video vodnik, vsebuje nekaj profesionalnih nasvetov za urejanje videoposnetkov, s pomočjo katerih lahko svoje videoposnetke uredite tako, da izgledajo odlično.

Shranite video v MOV ali AVI (ali MPG, CD, DV)

Do konca te vaje bomo domnevali, da imate video posnetke shranjene v nekakšni visokokakovostni (nekompresirani) obliki, kot sta AVI ali MOV. Čeprav lahko te datoteke uporabljate takšne, kot so, naletite na vse težave z videoposnetkom, o katerih smo že govorili. Na naslednjih straneh je razloženo, kako datoteko pretvorite v tri vrste, tako da jo lahko vidi največje število brskalnikov.

Pretvorite video v Ogg za Firefox

Prva oblika, v katero bomo pretvorili, je Ogg (včasih imenovana Ogg-Theora). Ta oblika je tista, ki si jo lahko ogledajo vsi Firefox 3.5, Opera 10.5 in Chrome 3.

Na žalost Ogg sicer podpira podporo brskalnika, vendar mnogi znani video programi, ki jih lahko kupite (Adobe Media Encoder, QuickTime itd.), Ne ponujajo možnosti pretvorbe Ogg. Edini način za pretvorbo videoposnetka v Ogg je iskanje programa za pretvorbo v spletu.

Možnosti pretvorbe

Obstaja spletno orodje Media-Convert, ki trdi, da pretvarja različne formate video (in avdio) v druge video (in avdio) formate. Ko smo ga preizkusili z mojim 3-sekundnim testnim videoposnetkom, ga na mojem Macu ni uspelo zagnati. Morda pa imate več sreče. Ta stran ima prednost, da je brezplačna.

Nekatera druga orodja, ki smo jih našli, vključujejo:

• Miro Video Converter (Windows Macintosh): Prednost tega programa je pretvorba v Ogg in MP4 (H.264) in je odprtokodna.
• Brezplačen video pretvornik: Menimo, da ima to različico za Windows in Macintosh, vendar je bilo težko ugotoviti z njihove strani
• Preprosto kodiranje Theore (Macintosh): Tega običajno uporabljamo.

Ko video shranite v formatu Ogg, ga shranite na mesto na svojem spletnem mestu in pojdite na naslednjo stran, da ga pretvorite v druge oblike za druge brskalnike.

Pretvorite video v MP4 za Safari in Internet Explorer

Naslednja oblika, v katero bi morali pretvoriti svoj video, je MP4 (H.264 video), da ga lahko predvajate v Internet Explorerju 9 in novejših različicah, Safariju 3 in 4 ter iPhoneu in Androidu.

Ta oblika je lažje na voljo v komercialnih izdelkih in verjetno že imate program, ki se pretvori v MP4, če imate urejevalnik videoposnetkov. Če imate Adobe Premiere lahko uporabite Adobe Video Encoder ali če imate tudi QuickTime Pro, ki deluje. Številni pretvorniki, o katerih smo razpravljali na prejšnji strani, pretvarjajo tudi videoposnetke v MP4.

• MediaConvert: Spletno orodje AWS.
• Miro Video Converter (Windows Macintosh): Prednost tega programa je pretvorba v Ogg in MP4 (H.264) in je odprtokodna.
• SUPER (Windows): pretvori veliko različnih vrst datotek v MP4
• Brezplačen video pretvornik: Menimo, da ima to različico za Windows in Macintosh, vendar je bilo težko ugotoviti z njihove strani.

Dodajte video element na svojo spletno stran

1. Ustvarite svojo spletno stran, kot bi jo običajno:

2. V notranjost telesa postavite
3. Odločite se, katere atribute želite, da ima vaš videoposnetek: priporočamo uporabo kontrolnikov in predhodnega nalaganja. Uporabite možnost plakata, če vaš video nima dobrega prvega prizora.
   samodejno predvajanje - za zagon takoj po prenosu
4. kontrolniki - omogočite bralcem nadzor nad videoposnetkom (zaustavitev, previjanje nazaj, naprej)
5. zanka - začnite videoposnetek od začetka, ko se konča
6. prednalaganje - prednaložite videoposnetek, da bo hitreje pripravljen, ko ga kupec klikne
7. poster - določite sliko, ki jo želite uporabiti, ko se video ustavi
8. Nato dodajte izvorne datoteke za dve različici videoposnetka (MP4 in OGG) v
9. Odprite stran v Chrome 1, Firefox 3.5, Opera 10 in / ali Safari 4 in se prepričajte, da se pravilno prikaže. Preizkusite ga v vsaj Firefoxu 3.5 in Safariju 4, saj vsak uporablja drug kodek.

To je to. Ko namestite to kodo, boste dobili video, ki deluje v brskalnikih Firefox 3.5, Safari 4, Opera 10 in Chrome 1. Kaj pa Internet Explorer?

Za dodajanje videoposnetka na spletne strani je zelo enostavno uporabiti HTML 5. Večina sodobnih brskalnikov podpira HTML 5 video, čeprav ga vsi ne podpirajo na enak način. Toda to pomeni, da lahko video shranite v oblikah Ogg in MP4, tako da lahko napišete le štiri ali pet vrstic HTML, da bo prikazan v večini sodobnih brskalnikov (razen Internet Explorerja 8). Takole:

Napišite oznako doktorske vrste HTML 5, da bodo brskalniki vedeli, da pričakujejo HTML 5:

1. Ustvarite svojo spletno stran, kot bi jo običajno:

2. V notranjost telesa postavite
3. Odločite se, katere atribute želite, da ima vaš videoposnetek: priporočamo uporabo kontrolnikov in predhodnega nalaganja. Uporabite možnost plakata, če vaš video nima dobrega prvega prizora.
   samodejno predvajanje - za zagon takoj po prenosu
4. kontrolniki - omogočite bralcem nadzor nad videoposnetkom (zaustavitev, previjanje nazaj, naprej)
5. zanka - začnite videoposnetek od začetka, ko se konča
6. prednalaganje - prednaložite videoposnetek, da bo hitreje pripravljen, ko ga kupec klikne
7. poster - določite sliko, ki jo želite uporabiti, ko se video ustavi
8. Nato dodajte izvorne datoteke za dve različici videoposnetka (MP4 in OGG) v
9. Odprite stran v Chrome 1, Firefox 3.5, Opera 10 in / ali Safari 4 in se prepričajte, da se pravilno prikaže. Preizkusite ga v vsaj Firefoxu 3.5 in Safariju 4, saj vsak uporablja drug kodek.

To je to. Ko namestite to kodo, imate video, ki deluje v brskalnikih Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ in Chrome 1.

Preizkusite v čim več brskalnikih

Za vašo mirnost preizkusite tudi v starejših brskalnikih, da vidite, kaj počnejo, še posebej, če veliko vaših bralcev uporablja starejše brskalnike.

Testiranje video strani je ključnega pomena, če želite uspešen zagon. Preizkusite svojo stran v najbolj priljubljenih brskalnikih in različicah vašega spletnega mesta.

Ugotovili smo, da čeprav je za testiranje videoposnetkov mogoče uporabiti orodja, kot sta BrowserLab in AnyBrowser, to ni tako zanesljivo kot samostojno prikazovanje strani v brskalniku. Ko to storite, lahko resnično vidite, ali deluje ali ne.

Ker ste si prizadevali za kodiranje videoposnetka v več oblikah, ga preizkusite, da se bo prikazal v več brskalnikih. To pomeni, da bi ga morali preizkusiti vsaj v Firefoxu, Safariju in IE.

Za vašo mirnost preizkusite tudi v starejših brskalnikih, da vidite, kaj počnejo, še posebej, če veliko vaših bralcev uporablja starejše brskalnike.

Kako video delati v starejših brskalnikih

Kot pri vsaki spletni strani morate najprej razmisliti, kako pomembno je, da ti brskalniki delujejo. Če 90% vaših strank uporablja Netscape, bi morali imeti nadomestni načrt zanje. Če pa manj kot 1%, to morda ne bo toliko pomembno.

Ko se odločite, katere brskalnike boste poskušali podpirati, boste najlažje ustvarili nadomestno stran, v kateri si bodo lahko ogledali video. Na to nadomestno stran bi vdelali video z uporabo HTML 4. In nato bodisi uporabite neko obliko zaznavanja brskalnika, da jih preusmerite tja, bodisi preprosto dodajte povezavo do te strani na tej.