HTML5: n käyttäminen videon näyttämiseen nykyisissä selaimissa

Oman HTML 5 -videosi ylläpito vs. YouTuben käyttö

YouTube on loistava sivusto. Sen avulla video on helppo upottaa verkkosivut nopeasti, ja pieniä poikkeuksia lukuun ottamatta, se on melko saumaton niiden videoiden suorittamisessa. Jos lähetät videon YouTubeen, voit olla varma, että kuka tahansa voi katsella sitä.

Mutta YouTuben käytöllä videoiden upottamiseen on joitain haittoja

Suurin osa ongelmista YouTube ovat kuluttajapuolella eikä suunnittelijapuolella, esimerkiksi:

• Hidas haku ja indeksointi
• Palvelinkatkot
• Sisältö poistetaan (näennäisesti) mielivaltaisesti
• Liian paljon huonoa sisältöä

Mutta on joitain syitä, miksi YouTube on huono myös sisällöntuottajille, mukaan lukien:

• Videoiden enimmäispituus 10 minuuttia (ilmaisilla tileillä)
• Huono latausteho
• YouTube saa videollesi rajoittamattomat käyttöoikeudet
• Jokainen YouTube-käyttäjä saa rajoittamattoman käyttöoikeuden videoosi

HTML5-video tarjoaa joitain etuja YouTubeen verrattuna

Käyttämällä HTML5 videoille -toiminnon avulla voit hallita videosi kaikkia näkökohtia, kuka voi katsella sitä, kuinka kauan se on, mitä sisältö sisältää, missä sitä isännöidään ja miten palvelin toimii. Ja HTML5 antaa sinulle mahdollisuuden koodata videosi niin monessa muodossa kuin tarvitset varmistaaksesi, että suurin osa ihmisistä voi katsoa sitä. Asiakkaasi eivät tarvitse laajennusta tai odota, kunnes YouTube julkaisee uudemman version.

Tietenkin HTML5-video tarjoaa joitain haittoja

Nämä sisältävät:

• Sinun on koodattava videosi vähintään kolmessa eri koodekissa.
• Sinun on sisällytettävä JavaScript, jotta selaimet, jotka eivät tue HTML5 toimii.
• Palvelimesi on kyettävä hoitamaan videoiden isännöinnin kaistanleveysvaatimukset.

Nopea yleiskatsaus videotukeen verkossa

Videon lisääminen verkkosivuille on ollut pitkään vaikea prosessi. Oli niin monia asioita, jotka voivat mennä pieleen:

• Ensinnäkin käytät -tunniste upottaa videosi sivullesi. MUTTA kyseinen tagi on vanhentunut toisen tagin eduksi. Jotkut selaimet eivät koskaan tue sitä missään tapauksessa.
• Joten vaihdat -tunniste, mutta vanhemmat selaimet eivät tue sitä, ja uudemmat selaimet tukevat sen luonnetta.
• Sitten ajattelet Salama! Ja koodaa videosi FLV-tiedostona. Mutta Salama ei enää tueta Windows-laitteissa.
• Joten päätät ladata videosi videoiden upotussivustolle, kuten YouTubeen, mutta sitten sinulla on ongelmia YouTuben kanssa, joista keskustelimme.
• Lopuksi päätät käyttää HTML5: tä, mutta Internet Explorer ei tue sitä (vasta Internet Explorer 9: ssä). Ja vaikka olisitkin, tuettuja videokoodekistandardeja on kaksi ja vain yksi selain, joka voi käyttää molempia.

Joten mitä sinun pitäisi tehdä? Videosta luopuminen ei ole enää vaihtoehto useimmille sivustoille, koska video on yhä tärkeämpi. Ja monet sivustot ovat siirtyneet onnistuneesti videoihin.

Tämän artikkelin seuraavilla sivuilla kerrotaan, miten video lisätään toimiville verkkosivuillesi Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 ja 4, iPhone ja Android sekä Internet Explorer 7 ja 8. Sinulla on myös tarvitsemasi avaimet, jotta voit lisätä tukea muille vanhemmille selaimille.

Luo ja muokkaa videota

Ensimmäinen asia, jota tarvitset, kun aiot laittaa videon verkkosivulle, on varsinainen video. Voit joko kuvata jatkuvasti ja muokata sen jälkeen ominaisuuden luomiseksi, tai voit skriptata sen ja suunnitella sen etukäteen. Kumpikin tapa toimii hyvin, se on mitä vain sinulle sopii. Jos et tiedä minkä tyyppistä videota sinun pitäisi tehdä, tutustu näihin ideoihin Desktop Video Guide -oppaasta:

• Perhevideoprojektit
• Markkinointi- ja myynninedistämisvideot
• Video-virtuaalikierrokset
• Kuinka videoita
• Häävideot

Opi tallentamaan korkealaatuista videota

Varmista, että osaat tallentaa sisä- ja ulkotiloja sekä äänen tallentamista. Valaistus on myös erittäin tärkeää - liian kirkkaat otokset vahingoittavat silmiä, ja liian tummat näyttävät vain mutaisilta ja epäammattimaisilta. Vaikka aiot sivustollasi olla vain 30 sekunnin videon, sitä korkeampi laatu on, sitä parempi se heijastuu verkkosivustollasi.

Muista myös, että tekijänoikeus koskee kaikkia ääniä tai musiikkia (samoin kuin arkistomateriaalia), joita haluat ehkä käyttää videossasi. Jos sinulla ei ole pääsyä kaveriin, joka voi kirjoittaa ja soittaa kappaleen puolestasi, sinun on löydettävä maksuton musiikki pelata taustalla. On myös paikkoja, joihin voit tallentaa videoita lisätäksesi videoihisi.

Videon muokkaaminen

Sillä ei ole väliä mitä muokkausohjelmistoa käytät, kunhan olet perehtynyt siihen ja pystyt käyttämään sitä tehokkaasti. Gretchenillä, Desktop Video Guide -oppaalla, on joitain ammattimaisia ​​videon muokkausvinkkejä, joiden avulla voit muokata videoita niin, että ne näyttävät hyvältä.

Tallenna video MOV- tai AVI-tiedostoon (tai MPG, CD, DV)

Tämän opetusohjelman loppuosan oletamme, että videosi on tallennettu jonkinlaiseen korkealaatuiseen (pakkaamattomaan) muotoon, kuten AVI tai MOV. Vaikka voit käyttää näitä tiedostoja sellaisina kuin ne ovat, kohtaat kaikki videon ongelmat, joista olemme jo keskustelleet. Seuraavilla sivuilla selitetään, miten tiedosto muunnetaan kolmeksi tyypiksi siten, että se on näkyvissä suurimmalla osalla selaimia.

Muunna video Ogg: ksi Firefoxille

Ensimmäinen muunnettava muoto on Ogg (joskus kutsutaan Ogg-Theoraksi). Tämä muoto on sellainen, jota Firefox 3.5, Opera 10.5 ja Chrome 3 voivat kaikki tarkastella.

Valitettavasti vaikka Oggilla on selaintuki, monet tunnetuista video-ohjelmista, joita voit ostaa (Adobe Media Encoder, QuickTime jne.), Eivät tarjoa Ogg-muunnosvaihtoehtoa. Joten ainoa tapa muuntaa video Oggiksi on löytää muunnosohjelma verkosta.

Muunnosvaihtoehdot

On online-työkalu nimeltä Media-Convert, joka väittää muuntavansa eri videomuodot (ja äänen) muiksi video- (ja ääni) muodoiksi. Kun yritimme sitä 3 sekunnin testivideollani, emme saaneet sitä toimimaan Mac-tietokoneellani. Mutta sinulla voi olla parempi onni. Tämän sivuston etuna on ilmainen.

Joitakin muita löydettyjä työkaluja ovat:

• Miro Video Converter (Windows Macintosh): Tämän ohjelman etuna on muuntaa sekä Ogg että MP4 (H.264) ja se on avoimen lähdekoodin.
• Ilmainen Video Converter: Mielestämme tällä on sekä Windows- että Macintosh-versio, mutta heidän sivustoltaan oli vaikea kertoa
• Yksinkertainen Theora-kooderi (Macintosh): Tätä käytämme yleensä.

Kun olet tallentanut videosi Ogg-muodossa, tallenna se verkkosivustosi sijaintiin ja siirry seuraavalle sivulle ja muunna se muiksi muille selaimille.

Muunna video MP4: ksi Safarille ja Internet Explorerille

Seuraava muoto, jonka sinun tulisi muuntaa video, on MP4 (H.264-video), jotta sitä voidaan toistaa Internet Explorer 9: ssä tai uudemmassa, Safari 3: ssa ja 4: ssä sekä iPhonessa ja Androidissa.

Tämä muoto on helpommin saatavana kaupallisissa tuotteissa, ja sinulla on todennäköisesti jo ohjelma, joka muuntaa MP4: ksi, jos sinulla on videoeditori. Jos sinulla on Adobe Premiere Voit käyttää Adobe Video Encoderia tai jos sinulla on myös toimiva QuickTime Pro. Monet muuntimista, joista keskustelimme edellisellä sivulla, myös muuntaa videoita MP4: ksi.

• MediaConvert: Online AWS -työkalu.
• Miro Video Converter (Windows Macintosh): Tämän ohjelman etuna on muuntaa sekä Ogg että MP4 (H.264) ja se on avoimen lähdekoodin.
• SUPER (Windows): Muuntaa useita erilaisia ​​tiedostotyyppejä MP4: ksi
• Ilmainen Video Converter: Mielestämme tällä on sekä Windows- että Macintosh-versio, mutta heidän sivustoltaan oli vaikea kertoa.

Lisää videoelementti verkkosivullesi

1. Luo Web-sivusi normaalisti:

2. Aseta kehon sisälle
3. Päätä videosi määritteet: Suosittelemme käyttämään säätimiä ja esilatausta. Käytä julistevaihtoehtoa, jos videossasi ei ole hyvää ensimmäistä kohtausta.
   automaattinen toisto - aloittaa heti, kun se on ladattu
4. säätimet - anna lukijoiden hallita videota (tauko, kelaus taaksepäin, kelaus eteenpäin)
5. silmukka - aloita video alusta, kun se päättyy
6. esilataus - lataa video valmiiksi, jotta se on valmis nopeammin, kun asiakas napsauttaa sitä
7. juliste - määritä kuva, jota haluat käyttää, kun video pysäytetään
8. Lisää sitten videosi kahden version (MP4 ja OGG) lähdetiedostot
9. Avaa sivu Chrome 1: ssä, Firefox 3.5: ssä, Opera 10: ssä ja / tai Safari 4: ssä ja varmista, että se näkyy oikein. Testaa se vähintään Firefox 3.5: ssä ja Safari 4: ssä - koska kumpikin käyttää eri koodekkia.

Se siitä. Kun tämä koodi on paikallaan, sinulla on video, joka toimii Firefox 3.5: ssä, Safari 4: ssä, Opera 10: ssä ja Chrome 1: ssä. Mutta entä Internet Explorer?

HTML 5: n avulla on erittäin helppoa lisätä video verkkosivuille. Suurin osa nykyaikaisista selaimista tukee HTML 5 -videota, vaikka ne kaikki eivät tue sitä samalla tavalla. Mutta tämä tarkoittaa sitä, että jos tallennat videosi sekä Ogg- että MP4-muodossa, voit kirjoittaa vain neljä tai viisi riviä HTML-koodia saadaksesi sen näyttämään useimmissa moderneissa selaimissa (paitsi Internet Explorer 8). Näin:

Kirjoita HTML 5 doctype -merkki niin, että selaimet tietävät odottavansa HTML 5: tä:

1. Luo Web-sivusi normaalisti:

2. Aseta kehon sisälle
3. Päätä videosi määritteet: Suosittelemme käyttämään säätimiä ja esilatausta. Käytä julistevaihtoehtoa, jos videossasi ei ole hyvää ensimmäistä kohtausta.
   automaattinen toisto - aloittaa heti, kun se on ladattu
4. säätimet - anna lukijoiden hallita videota (tauko, kelaus taaksepäin, kelaus eteenpäin)
5. silmukka - aloita video alusta, kun se päättyy
6. esilataus - lataa video valmiiksi, jotta se on valmis nopeammin, kun asiakas napsauttaa sitä
7. juliste - määritä kuva, jota haluat käyttää, kun video pysäytetään
8. Lisää sitten videosi kahden version (MP4 ja OGG) lähdetiedostot
9. Avaa sivu Chrome 1: ssä, Firefox 3.5: ssä, Opera 10: ssä ja / tai Safari 4: ssä ja varmista, että se näkyy oikein. Testaa se vähintään Firefox 3.5: ssä ja Safari 4: ssä, koska kumpikin käyttää eri koodekkia.

Se siitä. Kun tämä koodi on paikallaan, sinulla on video, joka toimii Firefox 3.5: ssä, Safari 4: ssä, Opera 10: ssä, Internet Explorer 9+: ssa ja Chrome 1: ssä.

Testaa mahdollisimman monessa selaimessa

Mielenrauhan vuoksi sinun tulee myös testata vanhemmissa selaimissa nähdäksesi, mitä he tekevät, varsinkin jos monet lukijoistasi käyttävät vanhempia selaimia.

Videosivujen testaaminen on erittäin tärkeää, jos haluat käynnistää onnistuneesti. Testaa sivusi verkkosivustosi suosituimmissa selaimissa ja versioissa.

Olemme havainneet, että vaikka on mahdollista käyttää työkaluja kuten BrowserLab ja AnyBrowser videoiden testaamiseen, se ei ole yhtä luotettavaa kuin tuoda sivu selaimelle itse. Kun teet niin, voit todella nähdä, toimiiko se vai ei.

Koska yritit koodata videosi useissa muodoissa, sinun on testattava se varmistaaksesi, että se näkyy useissa selaimissa. Tämä tarkoittaa, että sinun on testattava vähintään Firefoxissa, Safarissa ja IE: ssä.

Mielenrauhan vuoksi sinun tulee myös testata vanhemmissa selaimissa nähdäksesi, mitä he tekevät, varsinkin jos monet lukijoistasi käyttävät vanhempia selaimia.

Videon saaminen toimimaan vanhemmissa selaimissa

Kuten minkä tahansa verkkosivun kohdalla, sinun tulee ensin miettiä, kuinka tärkeää on saada nämä selaimet toimimaan. Jos 90% asiakkaistasi käyttää Netscape-ohjelmaa, sinulla tulisi olla varajärjestelmä heille. Mutta jos alle 1% tekee, sillä ei ehkä ole väliä niin paljon.

Kun olet päättänyt, mitä selaimia yrität tukea, helpoin tapa on yksinkertaisesti luoda vaihtoehtoinen sivu heille katsomaan videota. Siihen vaihtoehtoiseen sivuun upotat videon HTML 4: llä. Ja sitten joko käytä jonkinlaista selaimen tunnistusohjelmaa ohjaamaan heidät sinne tai lisää vain linkki tälle sivulle tälle sivulle.