HTML5-videotunnisteella on helppo lisätä videoita Web-sivuillesi. Mutta vaikka se näyttää helposti pinnalta, on paljon asioita, jotka sinun on tehtävä, jotta saat videosi näkyviin. Tämä opetusohjelma vie sinut vaiheiden avulla luomaan HTML5-sivun, joka näyttää videon kaikissa moderneissa selaimissa.
- Oman HTML5-videon käyttö vs. YouTube-sovellus
- Nopea yleiskatsaus videotukeen verkossa
- Luo ja muokkaa videota
- Muunna video Ogg for Firefox
- Muunna Video MP4 for Safari
- Muunna video FLV: ksi Internet Explorerille
- Lisää videoosi web-sivusi
- Lisää JavaScript ja Flash Player saada Internet Explorer toimimaan
- Testaa niin monta selausta kuin pystyt
Oma HTML 5 -videosi vs. YouTube-sovellus
YouTube on erinomainen sivusto. Se helpottaa videon upottamista verkkosivuihin nopeasti ja pienillä poikkeuksilla on melko saumattomia näiden videoiden suorittamiseen. Jos lähetät videon YouTubeen, voit olla melko varma, että kuka tahansa voi katsella sitä.
Mutta YouTubessa upotat videosi upottamalla on joitain haittoja
Useimmat YouTuben ongelmista ovat kuluttajan puolella, eikä suunnittelijapuolelta, kuten:
- Hidas haku ja indeksointi
- Palvelimen katkokset
- Sisältö poistetaan (näennäisesti) mielivaltaisesti
- Liian paljon huonoa sisältöä
On kuitenkin olemassa joitain syitä, joiden vuoksi YouTube on huono myös sisällön kehittäjille, kuten:
- 10 minuutin maksimipituus videoille (ilmaiseksi tileille)
- Huono lataustulos
- YouTube saa rajattomia käyttöoikeuksia videolle
- Kaikki YouTube-käyttäjät saavat videon rajoittamaton käyttöoikeudet
HTML5-video antaa joitain etuja YouTubessa
HTML5-videon avulla voit hallita videosi kaikkia puolia, siitä, kuka voi tarkastella sitä, kuinka kauan se on, mitä sisältöä se sisältää, missä se on isäntänä ja miten palvelin toimii. Ja HTML5-video antaa sinulle mahdollisuuden koodata videoasi niin monta formaattia kuin haluat varmistaa, että suurin osa ihmisistä voi katsella sitä. Asiakkaasi eivät tarvitse laajennusta tai odota, kunnes YouTube julkaisee uudemman version.
Tietenkin, HTML5-video tarjoaa joitakin haittoja
Nämä sisältävät:
- Sinun on koodattava videosi vähintään kolmella eri koodekilla
- Sinun on sisällytettävä joitakin JavaScript-toimintoja sen varmistamiseksi, että selaimet, jotka eivät tue HTML5, toimivat
- Palvelimesi on kyettävä käsittelemään videoiden tarjoamista kaistanleveysvaatimuksista
Jatka lukemista alla
02/10Nopea yleiskatsaus videotukeen verkossa
Videoiden lisääminen web-sivuille on jo pitkään ollut vaikea prosessi. Siellä oli niin paljon asioita, jotka voisivat mennä pieleen:
- Ensin käytät videon lisäämiseen sivullesi. MUTTA kyseinen tunniste on vanhentunut toisen tagin hyväksi. Ja jotkut selaimet eivät koskaan tukeneet sitä.
- Joten vaihdat tagit, mutta vanhemmat selaimet eivät tue sitä ja uudet selaimet ovat luonteeltaan tuettuja.
- Sitten luulet Flash! Ja koodata videosi FLV-tiedostona. Mutta Flashia ei tueta monissa mobiililaitteissa, ja monet ihmiset vihaavat Flashia riippumatta siitä, miten sitä käytetään (25% vastaajista kyselytunnistin siitä, miten mieltäsi Flashista totesi, että he eivät voi millään tavalla vastustaa Flasha).
- Joten päätät lähettää videosi videosisältöä varten, kuten YouTubesta, mutta sinulla on ongelmia YouTuben kanssa, josta keskustelimme.
- Lopuksi päätät mennä HTML5: n kanssa, mutta Internet Explorer ei tue sitä (ei Internet Explorer 9: een asti). Ja vaikka et, on kaksi videokoodekstandardia, joita tuetaan ja vain yksi selain, joka voi käyttää molempia. Selaintuki videokoodekille ja -astioille
Joten mitä sinun pitäisi tehdä? Videosta luopuminen ei ole enää useimmille sivustoille vaihtoehto, sillä video on yhä tärkeämpi. Ja monet sivustot ovat siirtyneet onnistuneesti videoiksi.
Seuraavilla tämän artikkelin sivuilla voit siirtyä videoiden lisäämiseen Web-sivuillesi, jotka toimivat Firefoxissa 3.5, Opera 10.5, Chrome 3.0, Safari 3 ja 4, iPhone ja Android, Flash ja Internet Explorer 7 ja 8. Sinä sinulla on myös avaimet, joita tarvitaan lisäämällä muita vanhempia selaimia tarvittaessa.
Jatka lukemista alla
03/10Luo ja muokkaa videota
Ensimmäinen asia mitä tarvitset, kun aiot laittaa videon Web-sivulle on todellinen video. Voit joko kuvata jatkuvasti ja muokata sen jälkeen luoda ominaisuuden, tai voit kirjoittaa sen ja suunnitella sen etukäteen. Kummassakin tapauksessa toimii hyvin, se on mitä olet tyytyväinen. Jos et tiedä minkälaista videota sinun pitäisi tehdä, tutustu ideoihin Desktop Video Guide -oppaasta:
- Perhe-videohankkeet
- Markkinointi- ja myynninedistämisvideoita
- Video virtuaalikierroksia
- Kuinka videot
- Häät videot
Opi korkealaatuisen videokuvan tallentamiseen
Varmista, että voit tallentaa sisä- ja ulkotilaan sekä nauhoittaa ääntä. Valaistus on myös erittäin tärkeä - liian kirkkaat laukaukset silmät vahingoittivat, ja liian tummat vain näyttävät mutaisilta ja epäammattisilta. Vaikka suunnittelet vain 30 sekunnin videon sivustossasi, sitä parempi laatu heijastuu verkkosivustollesi.
Muista myös, että tekijänoikeus koskee kaikkia ääniä tai musiikkia (sekä stock-kuvauksia), joita haluat käyttää videossa. Jos sinulla ei ole pääsyä kaverille, joka voi kirjoittaa ja soittaa kappaleen sinulle, sinun on löydettävä taustalle rojaltiton musiikki. On myös paikkoja, joiden avulla voit lisätä videosi sisältöä.
Videon muokkaaminen
Ei ole väliä, mitä muokkausohjelmistoja käytät, niin kauan kuin olet perehtynyt siihen ja pystyy käyttämään sitä tehokkaasti. Gretchenissä, Desktop Video Guide -ohjelmassa on joitain ammattimaisia videonmuokkausvinkkejä, joiden avulla voit muokata videoita niin, että ne näyttävät hyvältä.
Tallenna video MOV- tai AVI (tai MPG, CD, DV)
Muun tämän opetusohjelman osalta aiomme olettaa, että videosi on tallennettu johonkin korkealaatuiseen (ei pakkaamattomaan) muotoon, kuten AVI tai MOV. Vaikka voit käyttää näitä tiedostoja sellaisenaan, voit kohdistaa kaikki videon ongelmat, joista olemme jo keskustelleet. Seuraavilla sivuilla kerrotaan, miten tiedostosi muunnetaan kolmeksi tyypiksi, jotta se voidaan nähdä useimmissa selaimissa.
04/10Muunna video Ogg for Firefox
Ensimmäinen muoto, jonka muuntelemme, on Ogg (kutsutaan toisinaan Ogg-Theora). Tämä muoto on sellainen, että Firefox 3.5, Opera 10.5 ja Chrome 3 voivat kaikki katsella.
Valitettavasti vaikka Oggilla on selainkäyttötuki, monet tunnetuista videoohjelmista, joita voit ostaa (Adobe Media Encoder, QuickTime jne.), Eivät tarjoa Ogg-muunnosvaihtoehtoa. Joten ainoa tapa muuntaa videosi Oggiksi on löytää konversio-ohjelma verkosta.
Muuntovaihtoehdot
On online-työkalu nimeltä Media-Convert, joka väittää muuntavan eri videoformaatteja (ja ääntä) muille video- (ja ääni-) formaateille. Kun kokeilimme sitä 3 sekunnin testivideomme kanssa, emme voineet saada sitä toimimaan Mac-tietokoneessani. Mutta sinulla voi olla parempi onni. Tällä sivustolla on hyötyä siitä, että se on ilmainen.
Joitakin muita löydettyjä työkaluja ovat:
- Miro Video Converter (Windows Macintosh) - Tällä ohjelmalla on hyötyä muuntaa sekä Ogg ja MP4 (H.264) ja se on avoimen lähdekoodin.
- Koyote Video Converter (Windows)
- Free Video Converter Mielestämme on sekä Windows- että Macintosh-versio, mutta heidän sivustostaan oli vaikea kertoa
- Yksinkertainen Theora Encoder (Macintosh) - tämä on sellainen, jota me käytämme.
Kun video on tallennettu Ogg-muotoon, tallenna se sivustosi sijaintiin ja siirry seuraavalle sivulle muuttaaksesi sen muille formaateille muille selaimille.
Jatka lukemista alla
05/10Muunna Video MP4 for Safari
Seuraava muoto, jonka pitäisi muuntaa videosi, on MP4 (H.264 video), jotta se voidaan toistaa Safari 3: ssa ja 4: ssa sekä iPhonessa ja Androidissa. Plus, H.264-videot voidaan helposti muuntaa FLV-tiedostoiksi Flash-katseluun.
Tämä muoto on helpommin saatavilla kaupallisissa tuotteissa, ja sinulla on todennäköisesti jo ohjelma, joka muuntaa MP4: lle, jos sinulla on videoeditori. Jos sinulla on Adobe Premiere, voit käyttää Adobe Video Encoderia tai jos sinulla on QuickTime Pro, joka toimii myös. Monet edellisellä sivulla keskustelluista muuntimista myös muuntaa videot MP4: ksi.
- MediaConvert - online-AWS-työkalu.
- Miro Video Converter (Windows Macintosh) - Tällä ohjelmalla on hyötyä muuntaa sekä Ogg ja MP4 (H.264) ja se on avoimen lähdekoodin.
- SUPER (Windows) - muuntaa useita eri tiedostotyyppejä MP4- ja FLV-tiedostoiksi
- Free Video Converter Mielestämme on sekä Windows- että Macintosh-versio, mutta heidän sivustostaan oli vaikea kertoa.
Tallenna MP4-tiedosto verkkosivustoosi ja sitten sinun täytyy muuntaa se Flash for Internet Explorerin käytettäväksi.
06/10Muunna video FLV: ksi Internet Explorerille
Helpoin tapa muuntaa videot FLV: ään on Flashin käyttäminen. Näin voimme muuntaa videoni Flashiksi. Mutta jos sinulla ei ole Flashia, tässä on kaksi suosittua työkalua tiedostojen muuntamiseen FLV:
- SUPER (Windows) - muuntaa useita eri tiedostotyyppejä MP4- ja FLV-tiedostoiksi
- ffmpegX (Macintosh) - muuntaa useita eri tiedostotyyppejä Mp4 ja FLV.
Tallenna FLV-tiedosto verkkosivustollesi ja seuraava sivu näyttää, miten voit kirjoittaa HTML-koodin, jotta voit toistaa videoita.
Jatka lukemista alla
07/10Lisää videoosi web-sivusi
Videoiden lisääminen Web-sivuille on erittäin helppokäyttöinen HTML 5: n avulla. Useimmat nykyaikaiset selaimet tukevat HTML 5 -videota, vaikka ne eivät kaikki tue sitä samalla tavalla. Mutta mikä tarkoittaa sitä, että jos tallennat videosi sekä Ogg- että MP4-formaatiksi, voit kirjoittaa vain neljä tai viisi HTML-riviä, jotta se voidaan näyttää useimmissa selaimissa (paitsi Internet Explorer 8: ssa). Näin:
Kirjoita HTML 5 -dokumenttimerkki niin, että selaimet tietävät odottaa HTML 5:
- Luo verkkosivusi tavalliseen muotoon:
- Sisällä kehoa, aseta
- Päätä, millä ominaisuuksilla haluat videosi olevan: suosittelemme käyttämään ohjaimia ja esikuormitusta. Käytä julisteen vaihtoehtoa, jos videostasi ei ole hyvä ensivaikutelma.
- autoplay - aloittaa heti, kun se on ladattu
- ohjaimet - anna lukijasi hallita videota (tauko, taaksepäin, eteenpäin)
- loop - aloittaa videon alusta alkaen, kun se päättyy
- esikuormitus - lataa video esiasennettavaksi niin, että se on valmis nopeammin, kun asiakas napsauttaa sitä
- juliste - määritä kuva, jota haluat käyttää videon pysäyttämisen yhteydessä
- Lisää sitten kaksi videosi (MP4 ja OGG) lähdetiedostoa
- Avaa sivu Chrome 1: ssä, Firefoxissa 3.5, Opera 10 ja Safari 4: ssa ja varmista, että se näkyy oikein. Sinun pitäisi testata se vähintään Firefox 3.5: ssä ja Safari 4: ssä, koska ne käyttävät jokaista eri koodekkia.
Se siitä. Kun sinulla on tämä koodi paikalleen, sinulla on video, joka toimii Firefoxissa 3.5, Safari 4, Opera 10 ja Chrome 1. Mutta entä Internet Explorer?
Internet Explorer ei pidä HTML 5 tai
Seuraavassa jaksossa kerrotaan, mitä voit tehdä, jotta IE 8 voi pelata hienosti HTML5-videotunnisteillasi ja näyttää videon. Sinun on käytettävä Flashia.Hyvä uutinen on, että IE 9: n odotetaan tukevan HTML 5: tä ja videotunnistetta.
08 of 10Lisää JavaScript ja Flash Player saada Internet Explorer toimimaan
Olet ehkä huomannut, että edellisen sivun HTML-tiedostossa FLV-tiedostossa ei ollut lähdekoodia. Ja jos testasit kyseisen sivun Internet Explorerissa, se ei toimisi. Tämä johtuu siitä, että Internet Explorer ei tunnista HTML 5: ää eikä se voi toistaa OGG- tai MP4-videoita luonnollisesti. Jotta Internet Explorer 7 ja 8 toimisivat, sinun on saatava se pelata videota Flash-muodossa. Mutta on enemmän vaiheita saada se toimimaan kuin vain lisätä FLV-tiedosto.
Vaihe 1: Hanki Flash Video Player sivustoosi
Suosittelemme, että saat FlowPlayerin, koska se on avoimen lähdekoodin Flash-videotoisto, jonka voit asentaa Web-palvelimeen ja käyttää aina, kun sinulla on Flash-video. FlowPlayerin ilmainen versio lisää mainoksiasi videoihin, mutta voit myös ostaa kaupallisia lisenssejä, jos tarvitset niitä.
Asenna FlowPlayer verkkosivustollasi noudattamalla FlowPlayer-sivuston ohjeita. Lyhyesti sanottuna, asennat 2 SWF-tiedostoa ja JavaScript-tiedoston sivustollesi. HTML-koodin alalaidassa (ennen tag) lisäät rivin:
Mutta Internet Explorer ei vieläkään toista videota, sinun täytyy opettaa sitä tunnistamaan HTML 5 -tarrat.
Vaihe 2: Varmista Internet Explorerin lukea HTML 5 -tunnisteita
On olemassa kätevä käsikirjoitus Google-koodissa, joka tunnetaan nimellä HTML Shiv, joka auttaa IE: tä tunnistamaan HTML-elementtejä. Joten
jonka haluat viitata. On parasta sulkea se IE: n ehdollisiin kommentteihin, jotta muut selaimet eivät sekaudu:
Okei, nyt IE tunnistaa
