Videoposnetek HTML5 olajša dodajanje videoposnetkov na svoje spletne strani. Toda medtem, ko se zdi enostavno na površini, je veliko stvari, ki jih morate storiti, da bi dobili svoj videoposnetek. Ta vadnica vas bo vodila skozi korake za ustvarjanje strani v HTML5, ki bo zagnala video v vseh sodobnih brskalnikih.
- Gostovanje lastnega videoposnetka HTML5 vs. YouTube
- Hitri pregled video podpore na spletu
- Ustvarite in uredite videoposnetek
- Pretvori video na Ogg za Firefox
- Pretvorite videoposnetek v MP4 za Safari
- Pretvarjanje videoposnetka v FLV za Internet Explorer
- Dodajanje elementa video na svojo spletno stran
- Dodajte JavaScript in Flash Player, da omogočite delo za Internet Explorer
- Preizkusite v čim več brskalnikih
Gostovanje lastnega videoposnetka HTML 5 proti YouTube
YouTube je odlična spletna stran. Omogoča enostavno vdelavo videoposnetkov v spletne strani hitro, z nekaj manjšimi izjemami pa je pri izvedbi teh videoposnetkov dokaj enostavno. Če objavite videoposnetek v YouTubu, ste lahko prepričani, da ga bo kdo lahko gledal.
Toda uporaba YouTuba za vdelavo videoposnetkov ima nekaj pomanjkljivosti
Večina težav z YouTubom je na strani potrošnika in ne na strani oblikovalca, kot so:
- Počasno iskanje in indeksiranje
- Prekinitve strežnika
- Vsebina se odstrani (navidezno) samovoljno
- Preveč slaba vsebina
Vendar pa obstajajo nekateri razlogi, zakaj je YouTube še slab za razvijalce vsebine, vključno z:
- 10-minutna največja dolžina videoposnetkov (za brezplačne račune)
- Slaba uspešnost nalaganja
- YouTube pridobi neomejene pravice do uporabe videoposnetka
- Vsak uporabnik YouTuba dobi neomejeno pravico do uporabe videoposnetka
HTML5 Video ponuja nekatere prednosti prek YouTuba
Uporaba HTML5 za video vam omogoča nadzor nad vsemi vidiki vašega videoposnetka, od koga si ga lahko ogledate, kako dolgo je, kaj vsebuje vsebina, kje je gostitelj in kako deluje strežnik. Videoposnetek HTML5 vam omogoča, da svoje videoposnetke kodirate v toliko formatih, kot jih potrebujete, da se prepričate, ali je to največje število ljudi. Vašim strankam ni treba dodati vtičnika ali čakati, dokler YouTube ne bo izdal novejšo različico.
Seveda, video HTML5 ponuja nekaj pomanjkljivosti
Tej vključujejo:
- Kodo morate kodirati v vsaj treh kodekih
- Morate vključiti nekaj JavaScripta, da bodo brskalniki, ki ne podpirajo HTML5, delali
- Vaš strežnik mora biti sposoben obvladovati zahteve glede pasovne širine gostovanja videoposnetkov
Nadaljuj branje spodaj
02 od 10Hitri pregled video podpore na spletu
Dodajanje videa na spletne strani je že dolgo težek proces. Bilo je veliko stvari, ki bi lahko šlo narobe:
- Najprej uporabite oznako za vdelavo videoposnetka na svojo stran. BUT je ta oznaka opuščena v korist druge oznake. Nekateri brskalniki pa niso nikoli podpirali.
- Torej, preklopite na vendar starejši brskalniki tega ne podpirajo, novejše brskalnike pa so v svoji podpori skicirajo.
- Potem razmišljate o Flashu! In kodiraj svoj videoposnetek kot datoteko FLV. Toda Flash ni podprt na številnih mobilnih napravah in mnogi ljudje sovražijo Flash, ne glede na to, kako se uporablja (25% anketirancev v anketi, ki me sprašujejo o tem, kako se počutite o Flashu, so izjavile, da Flash ne morejo podrediti).
- Torej se boste odločili za prenos videoposnetka na spletno mesto za vdelavo videoposnetkov, kot je YouTube, vendar imate težave z YouTubom, o katerem smo razpravljali.
- Končno se odločite, da gredo z HTML5, vendar ga Internet Explorer ne podpira (ne do Internet Explorerja 9). In tudi če imate, sta na voljo dva standarda za video kodek, ki podpirata, in samo en brskalnik, ki lahko uporablja obe. Podpora brskalnika za video kodekse in vsebnike
Torej, kaj naj storim? Oddajanje na videoposnetek večina spletnih mest ni več možna, saj postaja videoposnetek vedno bolj pomemben. In mnoga spletna mesta so uspešno prešla na video.
Naslednje strani tega članka vas bodo popeljale s tem, kako dodati video na svoje spletne strani, ki delujejo v Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 in 4, iPhone in Android, Flash in Internet Explorer 7 in 8. imate tudi ključe, ki jih potrebujete za dodajanje podpore za druge starejše brskalnike, če je potrebno.
Nadaljuj branje spodaj
03 od 10Ustvarite in uredite videoposnetek
Prva stvar, ki jo potrebujete, ko boste posneli video na spletni strani, je dejanski videoposnetek. Nato lahko nenehno posnamete in pozneje uredite, da ustvarite funkcijo ali pa jo skriptirate in načrtujete pred časom. Kakorkoli, dobro deluje, to je samo tisto, kar vam je všeč. Če ne veste, kakšno vrsto videoposnetka morate narediti, si oglejte te zamisli iz vodnika za videokamere za namizje:
- Družinski video projekti
- Marketing in promocijske videoposnetke
- Video Virtual Tours
- Kako do videoposnetkov
- Poroka Videos
Več o snemanju videokamera visoke kakovosti
Prepričajte se, da veste, kako posnamete v zaprtih prostorih in na prostem, pa tudi, kako posnamete zvok. Osvetlitev je prav tako zelo pomembna - posnetki, ki so preveč svetli poškodujejo oči, in preveč temno samo videti blatne in neprofesionalne. Tudi če na vašem spletnem mestu načrtujete le 30-sekundni video, višja kakovost je bolje, da se bo odražala na vaši spletni strani.
Ne pozabite tudi, da avtorske pravice veljajo za vse zvoke ali glasbo (kot tudi slike skladb), ki jih morda želite uporabiti v vašem videoposnetku. Če nimate dostopa do prijatelja, ki lahko za vas piše in predvaja pesem, boste morali v ozadju igrati brezplačno glasbo. Obstajajo tudi mesta, na katerih lahko posnetke dodate v svoje videoposnetke.
Urejanje videoposnetka
Ni važno, katero programsko opremo za urejanje uporabljate, samo, če ste seznanjeni z njim in jo lahko učinkovito uporabljate. Gretchen, vodnik za videokamere namizja, ima nekaj profesionalnih nasvetov za urejanje videoposnetkov, ki vam lahko pomagajo urejati svoje videoposnetke, tako da so videti super.
Shranite videoposnetek na MOV ali AVI (ali MPG, CD, DV)
Za preostanek tega tutoriala bomo domnevali, da imate videoposnetek shranjen v neki vrsti visokokakovostnih (nestisnjenih) formatov, kot sta AVI ali MOV. Medtem ko lahko te datoteke uporabljate tako, kot ste, ste naleteli na vse težave z video, o katerih smo že razpravljali. Naslednje strani bodo razložile, kako pretvoriti datoteko v tri vrste, tako da jo lahko vidi največje število brskalnikov.
04 od 10Pretvori video na Ogg za Firefox
Prva oblika, ki jo bomo spremenili, je Ogg (včasih se imenuje Ogg-Theora). Ta oblika je tista, ki jo lahko vsi pregledujejo Firefox 3.5, Opera 10.5 in Chrome 3.
Na žalost, medtem ko Ogg podpira brskalnik, mnogi od dobro znanih video programov, ki jih lahko kupite (Adobe Media Encoder, QuickTime, itd.) Ne ponujajo Oggove možnosti konverzije. Torej je edini način za pretvorbo videoposnetka v program Ogg je iskanje programa za pretvorbo na spletu.
Možnosti konverzije
Obstaja spletno orodje, imenovano Media-Convert, ki trdi, da pretvori različne oblike video (in avdio) v druge oblike video (in avdio). Ko smo ga preizkusili z mojim 3-sekundnim testnim videoposnetkom, nismo mogli delati na mojem računalniku Mac. Ampak lahko imaš več sreče. Ta spletna stran ima koristi od tega, da je brezplačna.
Nekaj drugih orodij, ki smo jih našli, so:
- Miro Video Converter (Windows Macintosh) - Ta program ima koristi za pretvorbo v Ogg in MP4 (H.264) in je odprtokodni.
- Koyote Video Converter (Windows)
- Free Video Converter Mislimo, da ima to različico operacijskega sistema Windows in Macintosh, vendar je bilo na svojem spletnem mestu težko povedati
- Enostaven Theora Encoder (Macintosh) - to je tisti, ki ga uporabljamo.
Ko shranite videoposnetek v formatu Ogg, ga shranite na lokacijo na svojem spletnem mestu in pojdite na naslednjo stran, da jo pretvorite v druge oblike za druge brskalnike.
Nadaljuj branje spodaj
05 od 10Pretvorite videoposnetek v MP4 za Safari
Naslednji format, v katerega bi morali pretvoriti video, je MP4 (H.264 video), tako da ga lahko predvajate v Safari 3 in 4 ter v napravah iPhone in Android. Plus, H.264 video posnetke je mogoče preprosto pretvoriti v datoteke FLV za gledanje na Flash.
Ta oblika je bolj dostopna v komercialnih izdelkih in verjetno že imate program, ki bo pretvoril v MP4, če imate urejevalnik videoposnetkov. Če imate Adobe Premiere, lahko uporabite Adobe Video Encoder ali če imate QuickTime Pro, ki bo delovala tudi. Mnogi pretvorniki, o katerih smo razpravljali na prejšnji strani, bodo prav tako pretvorili videoposnetke v MP4.
- MediaConvert - spletno orodje AWS.
- Miro Video Converter (Windows Macintosh) - Ta program ima koristi za pretvorbo v Ogg in MP4 (H.264) in je odprtokodni.
- SUPER (Windows) - pretvorijo številne različne vrste datotek v MP4 in FLV
- Free Video Converter Mislimo, da ima to različico operacijskega sistema Windows in Macintosh, vendar je bilo na svojem spletnem mestu težko povedati.
Shranite svojo datoteko MP4 na svojo spletno stran in jo boste morali pretvoriti v Flash za Internet Explorer, ki ga želite uporabiti.
06 od 10Pretvarjanje videoposnetka v FLV za Internet Explorer
Najlažji način za pretvorbo videoposnetkov v FLV je uporaba Flasha. Tako pretvorimo svoje videoposnetke v Flash. Ampak, če nimate Flash, tukaj sta dve priljubljeni orodji za pretvorbo datotek v FLV:
- SUPER (Windows) - pretvorijo številne različne vrste datotek v MP4 in FLV
- ffmpegX (Macintosh) - pretvori veliko različnih vrst datotek na Mp4 in FLV.
Shranite datoteko FLV na vašo spletno stran in naslednja stran vam bo pokazala, kako napisati HTML, da lahko predvajate svoje videoposnetke.
Nadaljuj branje spodaj
07 od 10Dodajanje elementa video na svojo spletno stran
HTML-je zelo enostaven za dodajanje videoposnetkov na spletne strani. Večina sodobnih brskalnikov podpira HTML 5 video, čeprav jih na enak način ne podpirajo. Vendar to pomeni, da če boste videoposnetek shranili kot oblike zapisa Ogg in MP4, boste lahko v večini sodobnih brskalnikov (razen v Internet Explorerju 8) zapisali le štiri ali pet vrstic HTML. Evo kako:
Napišite oznako doctype HTML 5, tako da brskalniki vedo, da pričakujejo HTML 5:
- Ustvarite svojo spletno stran, kot jo običajno ustvarite:
- V notranjosti telesa postavite
- Odločite se, katere atribute želite, da ima vaš videoposnetek: Priporočamo uporabo kontrol in predhodno nalaganje. Uporabite možnost plakata, če videoposnetek nima dobrega prvega prizora.
- samodejno predvajanje - začeti takoj, ko je prenesen
- kontrole - omogočite svojim bralcem, da nadzorujejo videoposnetek (pavza, previjanje nazaj, hitro premikanje naprej)
- zanke - začnite videoposnetek od začetka, ko se konča
- prednapet - prednastavite videoposnetek, tako da je hitreje pripravljen, ko ga stranka klikne
- poster - določite sliko, ki jo želite uporabiti, ko je videoposnetek zaustavljen
- Nato dodajte izvorne datoteke za obe različici videoposnetka (MP4 in OGG) znotraj
- Odprite stran v Chromu 1, Firefoxu 3.5, Opera 10 in / ali Safari 4 in se prepričajte, da se prikazuje pravilno. Preizkusite ga vsaj v Firefoxu 3.5 in Safari 4 - saj vsak uporablja drug kodek.
To je to. Ko boste imeli to kodo, boste imeli videoposnetek, ki deluje v Firefox 3.5, Safari 4, Opera 10 in Chrome 1. Kaj pa Internet Explorer?
Internet Explorer ne všeč HTML 5 ali
V naslednjem razdelku bomo govorili o tem, kaj lahko storite, če želite, da se IE 8 lepo predvaja z videoposnetki HTML 5 in prikaže videoposnetek. Uporabiti morate Flash.Dobra novica je, da naj bi IE 9 podpiral HTML 5 in video oznako.
08 od 10Dodajte JavaScript in Flash Player, da omogočite delo za Internet Explorer
Morda ste opazili, da v datoteki HTML prejšnje strani ni bilo izvorne vrstice za datoteko FLV. In če ste preizkusili to stran v Internet Explorerju, to ne bi delovalo. To je zato, ker Internet Explorer ne prepozna HTML 5 in ne more igrati niti video posnetkov OGG ali MP4. Če želite, da Internet Explorer 7 in 8 delata, morate imeti videoposnetek kot Flash. Ampak obstaja več korakov, da bi lahko delal, kot samo dodajanje datoteke FLV.
1. korak: Pridobite video predvajalnik Flash za vašo spletno stran
Priporočamo, da FlowPlayer pridobite, ker je odprtokodni predvajalnik Flash video, ki ga lahko namestite na spletnem strežniku in ga uporabite, kadar koli imate Flash video za predvajanje. Brezplačna različica programa FlowPlayer vstavlja oglaševanje v svoje videoposnetke, lahko pa kupite tudi poslovne licence, če jih potrebujete.
Upoštevajte navodila na mestu FlowPlayer, da namestite FlowPlayer na svojem spletnem mestu. Na kratko boste namestili 2 SWF datotek in datoteko JavaScript na vašem spletnem mestu. Na dnu vašega HTML, (pred oznaka) dodate vrstico:
Vendar Internet Explorer še vedno ne bo predvajal videoposnetka, zato ga morate naučiti, kako prepoznati oznake HTML 5.
2. korak: prepričajte Internet Explorer, da preberete HTML 5 oznake
V Google kodi je priročen skript, imenovan "HTML Shiv", ki bo IE pomagal prepoznati elemente HTML 5. Torej v
vašega dokumenta HTML, na katerega se želite sklicevati. Najbolje je, da ga prilepite v pogojne komentarje IE, da se drugi brskalniki ne zmedejo:
Ok, zdaj IE bo prepoznal
