HTML 5 video tag olakšava dodavanje videozapisa na vaše web stranice . No, dok se čini lako na površini, puno je stvari koje trebate učiniti da biste pokrenuli i pokrenuli videozapis. Ovaj vodič vodi vas kroz korake za izradu stranice u HTML 5 koji će pokrenuti videozapis u svim modernim preglednicima.
- Hosting Vaš vlastiti HTML 5 Video vs Korištenje YouTube
- Brzi pregled video podrške na webu
- Stvorite i uredite svoj videozapis
- Pretvorite videozapis u Ogg za Firefox
- Pretvorite videozapis u MP4 za Safari
- Pretvorite video u FLV za Internet Explorer
- Dodajte video element na svoju web stranicu
- Dodajte JavaScript i Flash Player da biste dobili Internet Explorer za rad 1. dio
- Ispitajte što više preglednika
01 od 10
Hosting Vaš vlastiti HTML 5 Video vs Korištenje YouTube
YouTube je izvrsna web-lokacija. To olakšava brzo postavljanje videozapisa na web stranice , a uz neke manje iznimke prilično je besprijekorno u izvođenju tih videozapisa. Ako objavite videozapis na usluzi YouTube, možete biti prilično sigurni da će ga tko moći gledati.
No upotreba YouTubea za ugrađivanje videozapisa ima neke nedostatke
Većina problema s YouTubeom nalaze se na strani potrošača, a ne na dizajnerskoj strani, kao što su:
- Sporo pretraživanje i indeksiranje
- Do prekida rada poslužitelja
- Sadržaj je uklonjen (naizgled) samovoljno
- Previše lošeg sadržaja
Ali postoje razlozi zbog kojih je usluga YouTube loš za razvojne programere sadržaja, uključujući:
- Maksimalna duljina od 10 minuta za videozapise (za besplatne račune)
- Loši rezultati prijenosa
- YouTube dobiva neograničena prava korištenja za vaš videozapis
- Svaki korisnik usluge YouTube stječe neograničene korisničke prava na vaš videozapis
HTML 5 video daje neke prednosti putem usluge YouTube
Korištenje HTML 5 za video omogućit će vam upravljanje svim aspektima vašeg videozapisa, tko ga može vidjeti, koliko dugo jest, koji sadržaj sadrži, gdje je domaćin i kako se poslužitelj izvodi. A HTML 5 videozapis omogućuje vam kodiranje vašeg videozapisa u onoliko formata koliko vam je potrebno da biste bili sigurni da ga može vidjeti maksimalni broj korisnika. Vaši klijenti ne trebaju dodatak ili pričekajte dok YouTube ne objavi noviju inačicu.
Naravno, HTML 5 video nudi neke nedostatke
To uključuje:
- Morate kodirati svoj videozapis u najmanje tri različita kodeka
- Morate uključiti neke JavaScript kako biste osigurali da će preglednici koji ne podržavaju HTML 5 raditi
- Vaš poslužitelj mora biti u mogućnosti nositi se sa zahtjevima širine pojasa hostinga videozapisa
02 od 10
Brzi pregled video podrške na webu
Dodavanje videozapisa na web stranice dugo je bio težak proces. Bilo je toliko mnogo stvari koje bi mogle pogriješiti:
- Najprije upotrebljavate oznaku
- Zato se prebacite na oznaku
- Onda mislite " Bljesak !" I kodirajte svoj videozapis kao FLV datoteku. Ali Flash nije podržan na mnogim mobilnim uređajima, a mnogi ljudi mrze Flash bez obzira na to kako se koristi (25% ispitanika u mojoj anketi koja vas pita o tome kako se osjećate o Flashu navodi da ne mogu podnijeti Flash ni na koji način).
- Zato odlučite prenijeti videozapis na web mjesto za ugrađivanje videozapisa kao što je YouTube, ali imate problema s YouTubeom o kojima smo razgovarali.
- Konačno, odlučili ste se s HTML 5, ali Internet Explorer to ne podržava (ne do Internet Explorera 9). Čak i ako to učinite, postoje dva standarda video kodeka koji su podržani i samo jedan preglednik koji može koristiti oba. Podrška preglednika za video kodeke i kontejnere
Pa što biste trebali učiniti? Odustajanje od videozapisa više nije opcija za većinu web-lokacija, jer videozapis postaje sve važniji. A mnoge web-lokacije uspješno su se prebacile na videozapise.
Sljedeće stranice ovog članka će vas objasniti kako dodati video na svoje web stranice koje rade u Firefoxu 3.5, Opera 10.5, Chromeu 3.0, Safariu 3 i 4, iPhoneu i Androidu, Flashu i Internet Exploreru 7 i 8. Vi ćete također imaju ključeve koje trebate dodati podršku drugim starijim preglednicima ako je potrebno.
03 od 10
Stvorite i uredite svoj videozapis
Prva stvar koju trebate kad ćete staviti video na web stranicu je stvarni videozapis. Možete snimati kontinuirano i naknadno urediti da biste stvorili značajku, ili ga možete skriptirati i planirati ispred vremena. Bilo kako bilo, dobro je što ste zadovoljni. Ako ne znate koju vrstu videozapisa trebate napraviti, pogledajte ove ideje iz Video Guide za stolna računala:
- Obiteljski video projekti
- Marketing i promotivni videozapisi
- Video virtualne ture
- Kako videozapisima
- Vjenčanja
Saznajte kako snimiti videozapis visoke kvalitete
Pazite da znate snimiti u zatvorenom prostoru i na otvorenom, kao i snimanje zvuka. Osvjetljenje je također vrlo važno - previše svijetli snimci oštećuju oči, a previše tamno izgleda blatno i neprofesionalno. Čak i ako samo planirate imati 30 sekundi videozapis na svojoj web-lokaciji, veća kvaliteta je bolja da će se odraziti na vašu web-lokaciju.
Ne zaboravite da se autorsko pravo primjenjuje na sve zvukove ili glazbu (kao i snimke zaliha) koje biste mogli upotrebljavati u videozapisu. Ako nemate pristup prijatelju koji može pisati i reproducirati pjesmu za vas, morat ćete pronaći glazbu bez naknade kako biste igrali u pozadini. Postoje i mjesta na kojima možete snimati snimke za snimanje videozapisa.
Uređivanje videozapisa
Nije važno koji softver za uređivanje koristite, samo dok ste upoznati s njom i učinkovito ga možete koristiti. Gretchen, Desktop Video Guide, ima neke profesionalne savjete za uređivanje videozapisa koji vam mogu pomoći u uređivanju videozapisa kako bi izgledali sjajno.
Spremite svoj video u MOV ili AVI (ili MPG, CD, DV)
Za ostatak ovog vodiča pretpostavljamo da svoj videozapis spremite u neku vrstu visokokvalitetnog (ne komprimiranog) formata kao što je AVI ili MOV. Dok te datoteke možete koristiti kao takve, pokrenite sve probleme s videozapisima o kojima smo već razgovarali. Sljedeće stranice objašnjavaju kako pretvoriti vašu datoteku u tri vrste, tako da je moguće pregledati najveći broj preglednika.
04 od 10
Pretvorite videozapis u Ogg za Firefox
Prvi format na koji ćemo se pretvoriti je Ogg (ponekad se zove Ogg-Theora). Ovaj format je onaj koji Firefox 3.5, Opera 10.5 i Chrome 3 mogu vidjeti.
Nažalost, dok Ogg ima podršku preglednika, mnogi poznati video programi koje možete kupiti (Adobe Media Encoder, QuickTime itd.) Ne nude opciju pretvorbe Ogg. Tako je jedini način da se vaš videozapis pretvori u Ogg da pronađe program pretvorbe na webu.
Opcije pretvorbe
Postoji mrežni alat pod nazivom Media-Convert koji tvrdi da pretvaraju razne formate videozapisa (i zvuka) u druge video (i audio) formate. Kada smo ga pokušali s mojim testnim videozapisom od 3 sekunde, nismo uspjeli raditi na Macu. Ali možda imate bolju sreću. Ova stranica ima koristi od besplatnog.
Neki drugi alati koje smo pronašli uključuju:
- Miro Video Converter (Windows Macintosh) - Ovaj program ima prednost pretvorbe oba Ogg i MP4 (H.264) i to je open source.
- Koyote Video Converter (Windows)
- Free Video Converter Smatramo da to ima i verziju sustava Windows i Macintosh, no bilo je teško reći s njihovog web mjesta
- Jednostavna Theora Encoder (Macintosh) - to je onaj kojeg nastojimo koristiti.
Kada spremite svoj videozapis u Ogg format, spremite ga na lokaciju na svojoj web-lokaciji i idite na sljedeću stranicu da biste ga pretvorili u druge formate za druge preglednike.
05 od 10
Pretvorite videozapis u MP4 za Safari
Sljedeći format koji trebate pretvoriti u vaš videozapis je MP4 (H.264 video) tako da se može reproducirati na Safari 3 i 4 te iPhone i Android. Osim toga, H.264 videozapisi se lako mogu pretvoriti u FLV datoteke za gledanje na Flashu.
Taj je format lakše dostupan u komercijalnim proizvodima, a vjerojatno već imate program koji će se pretvoriti u MP4 ako imate uređivač videozapisa. Ako imate Adobe Premiere, možete koristiti Adobe Encoder, ili ako imate QuickTime Pro koji će raditi. Mnogi pretvornici o kojima smo razgovarali na prethodnoj stranici također će pretvoriti videozapise u MP4.
- Media-Convert - online alat
- Miro Video Converter (Windows Macintosh) - Ovaj program ima prednost pretvorbe oba Ogg i MP4 (H.264) i to je open source.
- SUPER (Windows) - pretvara mnoge različite vrste datoteka u MP4 i FLV
- Free Video Converter Smatramo da to ima i verziju sustava Windows i Macintosh, no bilo je teško reći s njihovog web mjesta
Spremite svoju MP4 datoteku na svoju web stranicu, a zatim ga trebate pretvoriti u Flash za Internet Explorer za upotrebu.
06 od 10
Pretvorite video u FLV za Internet Explorer
Najlakši način za pretvorbu videozapisa u FLV jest korištenje Flasha. Na taj način pretvaramo svoje videozapise u Flash. Ali ako nemate Flash, ovdje su dva popularna alata za pretvaranje datoteka u FLV:
- SUPER (Windows) - pretvara mnoge različite vrste datoteka u MP4 i FLV
- ffmpegX (Macintosh) - pretvara mnoge različite vrste datoteka u Mp4 i FLV.
Spremite FLV datoteku na svoju web stranicu i sljedeća stranica će vam pokazati kako napisati HTML kako biste mogli reproducirati svoje videozapise.
07 od 10
Dodajte video element na svoju web stranicu
Vrlo je jednostavno koristiti HTML 5 za dodavanje videozapisa na web stranice. Većina modernih preglednika podržava HTML 5 videozapis, iako ga ne podržavaju na isti način. No, to znači da ako spremite videozapis kao Ogg i MP4 formate, moći ćete pisati samo četiri ili pet redaka HTML-a da biste je prikazali u većini modernih preglednika (osim za Internet Explorer 8). Evo kako:
- Napišite oznaku doktora tipa HTML 5 kako bi preglednici znali očekivati HTML 5:
- Izradite svoju web stranicu kao što biste ga inače stvorili:
- Unutar tijela postavite
- Odlučite koje atribute želite da vaš videozapis ima:
- automatska reprodukcija - za početak čim se preuzme
- kontrole - omogućuju svojim čitateljima da kontroliraju videozapis (pauza, premotavanje unaprijed, premotavanje naprijed)
- petlja - započnite videozapis od početka kada završava
- učitavanje unaprijed - preuzimajte videozapis tako da je brže spremna kada korisnik klikne na njega
- plakat - odredite sliku koju želite koristiti kada je video zaustavljen
- Zatim dodajte izvorne datoteke za dvije verzije vašeg videozapisa (MP4 i OGG) unutar elementa
- Otvorite stranicu u pregledniku Chrome 1, Firefox 3.5, Opera 10 i / ili Safari 4 te provjerite prikazuje li se ispravno. Trebali biste ga testirati barem u pregledniku Firefox 3.5 i Safari 4 - budući da upotrebljavaju različite kodeke.
To je to. Kada nađete ovaj kod, imat ćete videozapis koji radi u Firefoxu 3.5, Safari 4, operi 10 i Chromeu 1. No što je s Internet Explorerom?
Internet Explorer ne sviđa HTML 5 ili
U sljedećem ćemo odjeljku govoriti o tome što možete učiniti da biste dobili IE 8 kako biste lijepo igrali sa svojim HTML 5 video oznakama i prikazali videozapis. Morate upotrijebiti Flash. Dobra vijest je da se očekuje da će IE 9 podržati HTML 5 i video tag.
08 od 10
Dodajte JavaScript i Flash Player da biste dobili Internet Explorer za rad
Možda ste primijetili da na HTML-u prethodne stranice nije bilo izvora za FLV datoteku. A ako ste testirali tu stranicu u programu Internet Explorer, to ne bi moglo funkcionirati. To je zato što Internet Explorer ne prepoznaje HTML 5 i ne može reproducirati OGG ili MP4 video nativno. Kako bi Internet Explorer 7 i 8 funkcionirao, trebate ga reproducirati kao Flash. No, ima više koraka za dobivanje na posao nego samo dodavanje FLV datoteke.
Korak 1: Preuzmite Flash Video Player za svoju web stranicu
Preporučujemo dobivanje FlowPlayera jer je Flash player za Flash otvoreni izvor koji možete instalirati na svoj web poslužitelj i koristiti kada god imate Flash video za reprodukciju. Besplatna verzija FlowPlayera ubacuje oglašavanje u svoje videozapise, ali možete kupiti komercijalne licence ako vam je potrebna.
Slijedite upute na stranici FlowPlayer kako biste instalirali FlowPlayer na svoju web stranicu. Ukratko, instalirat ćete 2 SWF datoteke i JavaScript datoteku na web sučelju. Na dnu HTML-a, (prije oznake ) dodati ćete retku: