Korištenje HTML5 za prikaz videozapisa u trenutnim preglednicima

Hostiranje vlastitog HTML 5 Video vs. Korištenje YouTubea

YouTube je sjajna stranica. Olakšava ugradnju videozapisa u Internet stranice brzo i uz neke manje iznimke prilično je neometano u izvođenju tih videozapisa. Ako objavite videozapis na YouTubeu, možete biti prilično sigurni da će ga itko moći pogledati.

Ali upotreba YouTubea za ugrađivanje vaših videozapisa ima nekih nedostataka

Većina problema s YouTube su na strani potrošača, a ne na strani dizajnera, stvari poput:

• Polako pretraživanje i indeksiranje
• Ispadi poslužitelja
• Sadržaj se uklanja (naizgled) proizvoljno
• Previše lošeg sadržaja

No, postoje neki razlozi zašto je YouTube loš i za programere sadržaja, uključujući:

• 10-minutno maksimalno trajanje videozapisa (za besplatne račune)
• Loša izvedba prijenosa
• YouTube dobiva neograničena prava na upotrebu vašeg videozapisa
• Bilo koji korisnik YouTubea stječe neograničena prava na upotrebu vašeg videozapisa

HTML5 Video daje neke prednosti u odnosu na YouTube

Koristeći HTML5 for video omogućuje vam kontrolu nad svim aspektima vašeg videozapisa, od toga tko ga može gledati, koliko je dug, što sadržaj sadrži, gdje je hostiran i kako poslužitelj radi. I HTML5 daje vam mogućnost kodiranja videozapisa u onoliko formata koliko vam je potrebno kako biste bili sigurni da ga može gledati maksimalan broj ljudi. Vašim kupcima nije potreban dodatak niti da čekaju dok YouTube ne izda noviju verziju.

Naravno, HTML5 video nudi neke nedostatke

To uključuje:

• Morate kodirati svoj videozapis u najmanje tri različita kodeka.
• Morate uključiti neki JavaScript kako biste osigurali preglednike koji ne podržavaju HTML5 će raditi.
• Vaš poslužitelj mora biti u stanju riješiti zahtjeve propusnosti za hosting video zapisa.

Kratki pregled video podrške na webu

Dodavanje videozapisa na web stranice dugo je bio težak proces. Bilo je toliko stvari koje bi mogle poći po zlu:

• Prvo, koristite oznaku za ugrađivanje videozapisa u vašu stranicu. ALI ta je oznaka zastarjela u korist druge oznake. A neki ga preglednici ionako nikad nisu dobro podržavali.
• Pa se prebacite na oznaku, ali stariji preglednici to ne podržavaju, a noviji preglednici imaju potpunu podršku.
• Onda mislite Bljesak! I kodirajte svoj videozapis kao FLV datoteku. Ali Bljesak više nije podržan na Windows uređajima.
• Dakle, odlučili ste prenijeti svoj videozapis na web mjesto za ugradnju videozapisa poput YouTubea, ali tada imate problema s YouTubeom o kojima smo razgovarali.
• Napokon, odlučili ste se za HTML5, ali Internet Explorer ga ne podržava (tek dok Internet Explorer 9). Pa čak i ako to učinite, postoje dva podržana standarda za video kodek i samo jedan preglednik koji može koristiti oba.

Pa što biste trebali učiniti? Odustajanje od videozapisa više nije opcija za većinu web lokacija, jer video postaje sve važniji. I mnoga su mjesta uspješno prešla na video.

Sljedeće stranice ovog članka provest će vas kroz postupak dodavanja videozapisa na vaše web-stranice koje rade u Firefoxu 3.5, Opera 10.5, Chrome 3.0, Safari 3 i 4, iPhoneu i Androidu te Internet Exploreru 7 i 8. Također ćete imati tipke potrebne za dodavanje podrške za druge starije preglednike ako je potrebno.

Stvorite i uredite svoj videozapis

Prvo što trebate kad želite postaviti video na web stranicu je stvarni video. Možete snimati kontinuirano i naknadno uređivati ​​kako biste stvorili značajku ili je možete scenarirati i isplanirati prije vremena. U svakom slučaju dobro funkcionira, samo je ono što vam odgovara. Ako ne znate koju biste vrstu videozapisa trebali snimiti, pogledajte ove ideje iz Vodiča za stolni video:

• Obiteljski video projekti
• Marketinški i promotivni videozapisi
• Video virtualne ture
• Kako video
• Vjenčani videozapisi

Saznajte kako snimati visokokvalitetni videozapis

Svakako znajte kako snimati u zatvorenom i na otvorenom, kao i kako snimati zvuk. Osvjetljenje je također vrlo važno - presvijetli snimci bole oči, a pretamni izgledaju mutno i neprofesionalno. Čak i ako na svojoj web lokaciji planirate imati samo 30 sekundi videozapisa, što je kvalitetniji to će se bolje odraziti na vašem web mjestu.

Imajte na umu da se autorska prava odnose na bilo koji zvuk ili glazbu (kao i na zalihe) koje biste mogli koristiti u svom videozapisu. Ako nemate pristup prijatelju koji vam može napisati i pustiti pjesmu, morat ćete je pronaći muzika bez naknade igrati u pozadini. Postoje i mjesta na kojima možete pohraniti snimke za dodavanje u svoje videozapise.

Uređivanje vašeg videozapisa

Nije važno koji softver za uređivanje koristite, samo ako ste ga upoznali i možete ga učinkovito koristiti. Gretchen, Desktop Video Guide, sadrži nekoliko profesionalnih savjeta za uređivanje videozapisa koji vam mogu pomoći u uređivanju videozapisa tako da izgledaju sjajno.

Spremite videozapis u MOV ili AVI (ili MPG, CD, DV)

Za ostatak ovog vodiča pretpostavit ćemo da je vaš video zapis sačuvan u nekoj vrsti visokokvalitetnog (nekomprimiranog) formata kao što je AVI ili MOV. Iako ove datoteke možete koristiti takve kakve jesu, nailazite na sve probleme s videozapisom o kojima smo već razgovarali. Sljedeće stranice objašnjavaju kako datoteku pretvoriti u tri vrste tako da je može vidjeti najveći broj preglednika.

Pretvorite video u Ogg za Firefox

Prvi format u koji ćemo pretvoriti je Ogg (ponekad se naziva Ogg-Theora). Ovaj format mogu pregledati svi Firefox 3.5, Opera 10.5 i Chrome 3.

Nažalost, iako Ogg ima podršku preglednika, mnogi poznati video programi koje možete kupiti (Adobe Media Encoder, QuickTime itd.) Ne nude Ogg pretvorbu. Dakle, jedini način za pretvorbu videozapisa u Ogg je pronalazak programa za pretvorbu na Webu.

Mogućnosti pretvorbe

Postoji internetski alat nazvan Media-Convert koji tvrdi da pretvara različite formate video (i audio) u druge video (i audio) formate. Kad smo ga isprobali s mojim testnim videozapisom od 3 sekunde, nismo uspjeli pokrenuti ga na mom Macu. Ali možda ćete imati više sreće. Prednost ove stranice je što je besplatna.

Neki drugi alati koje smo pronašli uključuju:

• Miro Video Converter (Windows Macintosh): Ovaj program ima prednost pretvorbe u Ogg i MP4 (H.264) i otvoren je izvor.
• Besplatno Video Converter: Mislimo da ovo ima verziju za Windows i Macintosh, ali bilo je teško reći s njihove web lokacije
• Jednostavni Theora Encoder (Macintosh): Ovo je ono koje obično koristimo.

Nakon što spremite videozapis u formatu Ogg, spremite ga na mjesto na svojoj web lokaciji i idite na sljedeću stranicu da biste ga pretvorili u druge formate za druge preglednike.

Pretvorite video u MP4 za Safari i Internet Explorer

Sljedeći format u koji biste trebali pretvoriti videozapis je MP4 (H.264 video) kako bi se mogao reproducirati na Internet Exploreru 9 i novijim verzijama, Safariju 3 i 4 te iPhoneu i Androidu.

Ovaj je format lakše dostupan u komercijalnim proizvodima i vjerojatno već imate program koji se pretvara u MP4 ako imate uređivač video zapisa. Ako imate Adobe Premiere možete koristiti Adobe Video Encoder ili ako imate QuickTime Pro koji također radi. Mnogi pretvarači o kojima smo razgovarali na prethodnoj stranici također pretvaraju videozapise u MP4.

• MediaConvert: Mrežni alat AWS.
• Miro Video Converter (Windows Macintosh): Ovaj program ima prednost pretvorbe u Ogg i MP4 (H.264) i otvoren je izvor.
• SUPER (Windows): Pretvorit će mnogo različitih vrsta datoteka u MP4
• Besplatno Video Converter: Mislimo da ovo ima verziju za Windows i Macintosh, ali bilo je teško reći s njihove web stranice.

Dodajte video element na svoju web stranicu

1. Stvorite svoju web stranicu onako kako biste je inače kreirali:

2. Unutar tijela postavite
3. Odlučite koje atribute želite da ima vaš videozapis: preporučujemo upotrebu kontrola i prethodnog učitavanja. Koristite opciju poster ako vaš videozapis nema dobru prvu scenu.
   automatska reprodukcija - za pokretanje čim se preuzme
4. kontrole - omogućite čitateljima kontrolu videozapisa (pauza, premotavanje unaprijed, unaprijed)
5. petlja - započnite videozapis od početka kad završi
6. preload - unaprijed preuzmite videozapis kako bi bio brži kada kupac klikne na njega
7. poster - definirajte sliku koju želite koristiti kad se video zaustavi
8. Zatim dodajte izvorne datoteke za dvije verzije vašeg videozapisa (MP4 i OGG) unutar datoteke
9. Otvorite stranicu u Chrome 1, Firefox 3.5, Opera 10 i / ili Safari 4 i provjerite prikazuje li se ispravno. Trebali biste ga testirati barem u Firefoxu 3.5 i Safariju 4 - jer svaki koristi drugačiji kodek.

To je to. Jednom kada postavite ovaj kôd, imat ćete video koji radi u Firefoxu 3.5, Safariju 4, Operi 10 i Chromeu 1. Ali što je s Internet Explorerom?

Vrlo je jednostavno koristiti HTML 5 za dodavanje videozapisa na web stranice. Većina modernih preglednika podržava HTML 5 video, iako ga ne podržavaju svi na isti način. No, to znači da ako svoj video zapis spremite u formate Ogg i MP4, možete napisati samo četiri ili pet redaka HTML-a kako bi se prikazao u većini modernih preglednika (osim u Internet Exploreru 8). Evo kako:

Napišite oznaku doktorskog tipa HTML 5 kako bi preglednici znali očekivati ​​HTML 5:

1. Stvorite svoju web stranicu onako kako biste je inače kreirali:

2. Unutar tijela postavite
3. Odlučite koje atribute želite da ima vaš videozapis: preporučujemo upotrebu kontrola i prethodnog učitavanja. Koristite opciju poster ako vaš videozapis nema dobru prvu scenu.
   automatska reprodukcija - za pokretanje čim se preuzme
4. kontrole - omogućite čitateljima kontrolu videozapisa (pauza, premotavanje unaprijed, unaprijed)
5. petlja - započnite videozapis od početka kad završi
6. preload - unaprijed preuzmite videozapis kako bi bio brži kada kupac klikne na njega
7. poster - definirajte sliku koju želite koristiti kad se video zaustavi
8. Zatim dodajte izvorne datoteke za dvije verzije vašeg videozapisa (MP4 i OGG) unutar datoteke
9. Otvorite stranicu u Chrome 1, Firefox 3.5, Opera 10 i / ili Safari 4 i provjerite prikazuje li se ispravno. Trebali biste ga testirati barem u Firefoxu 3.5 i Safariju 4 jer svaki koristi drugačiji kodek.

To je to. Nakon što postavite ovaj kôd, imat ćete videozapis koji radi u Firefoxu 3.5, Safariju 4, Operi 10, Internet Exploreru 9+ i Chromeu 1.

Testirajte u što većem broju preglednika

Da biste bili mirni, trebali biste testirati i u starijim preglednicima kako biste vidjeli što rade, pogotovo ako puno vaših čitatelja koristi starije preglednike.

Testiranje video stranica je presudno ako želite uspješno pokretanje. Svakako testirajte svoju stranicu u najpopularnijim preglednicima i verzijama svoje web stranice.

Otkrili smo da, iako je za testiranje videozapisa moguće koristiti alate poput BrowserLab i AnyBrowser, to nije toliko pouzdano kao samostalno otvaranje stranice u pregledniku. Kad to učinite, stvarno možete vidjeti radi li ili ne.

Budući da ste se potrudili kodirati svoj videozapis u više formata, trebali biste ga testirati kako biste bili sigurni da se prikazuje u više preglednika. To znači da biste ga trebali testirati u Firefoxu, Safariju i IE-u.

Da biste bili mirni, trebali biste testirati i u starijim preglednicima kako biste vidjeli što rade, pogotovo ako puno vaših čitatelja koristi starije preglednike.

Pokretanje videozapisa u starijim preglednicima

Kao i na bilo kojoj web stranici, prvo biste trebali razmisliti koliko je važno da ti preglednici rade. Ako 90% vaših kupaca koristi Netscape, trebali biste imati rezervni plan za njih. Ali ako to radi manje od 1%, to možda neće biti toliko važno.

Jednom kada odlučite koje ćete preglednike pokušati podržati, najlakši je način jednostavno stvoriti zamjensku stranicu na kojoj će moći gledati video. Na tu zamjensku stranicu ugradili biste videozapis koristeći HTML 4. A onda ili upotrijebite neki oblik otkrivanja preglednika da biste ih tamo preusmjerili ili jednostavno dodajte vezu na tu stranicu na ovoj.