HTML5 kasutamine video kuvamiseks praegustes brauserites

Oma HTML 5 video hostimine vs. YouTube'i kasutamine

YouTube on suurepärane sait. See hõlbustab video kinnistamist veebilehed kiiresti ja mõningate väikeste eranditega on nende videote teostamine üsna sujuv. Kui postitate video YouTube'i, võite olla üsna kindel, et igaüks saab seda vaadata.

Kuid YouTube'i kasutamisel videote manustamiseks on mõned puudused

Enamik probleeme Youtube on pigem tarbija kui disaineri poolel, näiteks:

• Aeglane otsimine ja indekseerimine
• Serverite katkestused
• Sisu eemaldatakse (näiliselt) meelevaldselt
• Liiga palju halba sisu

Kuid mõnel põhjusel on YouTube ka sisearendajatele halb, sealhulgas:

• Videote maksimaalne pikkus 10 minutit (tasuta kontode jaoks)
• Kehv üleslaadimise jõudlus
• YouTube saab teie videole piiramatu kasutusõiguse
• Iga YouTube'i kasutaja saab teie video jaoks piiramatu kasutusõiguse

HTML5 video annab YouTube'ile võrreldes eeliseid

Kasutamine HTML5 video jaoks võimaldab teil kontrollida oma video kõiki aspekte, alates sellest, kes seda saab vaadata, kui kaua see on, mida sisu sisaldab, kus seda hostitakse ja kuidas server toimib. Ja HTML5 annab teile võimaluse kodeerida oma video nii mitmes vormingus kui vaja, et veenduda, et seda saaks vaadata maksimaalselt palju inimesi. Teie kliendid ei vaja pistikprogrammi ega oodata, kuni YouTube avaldab uuema versiooni.

Muidugi pakub HTML5 video mõningaid puudusi

Need sisaldavad:

• Oma video peate kodeerima vähemalt kolmes erinevas koodekis.
• Toetavate brauserite tagamiseks peate lisama JavaScripti HTML5 töötab.
• Teie server peab suutma toime tulla videote hostimise ribalaiusenõuetega.

Kiire ülevaade videotugist veebis

Video lisamine veebilehtedele on pikka aega olnud keeruline protsess. Valesti võib minna nii palju asju:

• Esiteks kasutate märgend, et video oma lehele manustada. AGA see silt on aegunud teise sildi kasuks. Ja mõned brauserid ei toetanud seda nagunii kunagi hästi.
• Nii et lähete üle märgendit, kuid vanemad brauserid seda ei toeta ja uuemad brauserid on selle toes visandlikud.
• Siis mõtled Välk! Ja kodeerige oma video FLV-failina. Aga Välk ei toetata enam Windowsi seadmetes.
• Niisiis otsustate oma video üles laadida video kinnistamise saidile nagu YouTube, kuid siis on teil probleeme YouTube'iga, mida arutasime.
• Lõpuks otsustate minna HTML5-ga, kuid Internet Explorer ei toeta seda (alles enne Internet Explorer 9). Isegi kui te seda teete, on olemas kaks videokoodeki standardit, mida toetatakse, ja ainult üks brauser, mis saab mõlemat kasutada.

Mida sa siis tegema peaksid? Videost loobumine pole enamiku saitide jaoks enam valikuvõimalus, kuna video muutub üha olulisemaks. Ja paljud saidid on edukalt videotele üle läinud.

Selle artikli järgmistel lehtedel saate tutvustada, kuidas video oma toimivatele veebilehtedele lisada Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 ja 4, iPhone ja Android ning Internet Explorer 7 ja 8. Teil on ka võtmed, mida peate vajaduse korral lisama teistele vanematele brauseritele.

Looge ja muutke oma videot

Esimene asi, mida vajate, kui kavatsete video veebilehele panna, on tegelik video. Funktsiooni loomiseks võite kas pidevalt pildistada ja pärast muuta, või saate selle skriptida ja enne tähtaega planeerida. Mõlemal juhul töötab hästi, see on just see, mis teile sobib. Kui te ei tea, millist tüüpi videot peaksite tegema, vaadake neid ideid töölaua video juhendist:

• Pere videoprojektid
• Turundus- ja reklaamvideod
• Video virtuaalsed tuurid
• Kuidas videoid
• Pulmavideod

Siit saate teada, kuidas kvaliteetset videot salvestada

Veenduge, et teaksite, kuidas salvestada nii siseruumides kui ka väljas, samuti kuidas salvestada heli. Valgustus on samuti väga oluline - liiga eredad kaadrid teevad silmadele haiget ja liiga pimedad näivad lihtsalt porised ja ebaprofessionaalsed. Isegi kui plaanite oma saidil olla vaid 30-sekundilist videot, on seda kvaliteetsem, seda parem see teie veebisaidil kajastub.

Ärge unustage ka seda, et autoriõigus kehtib kõigi helide või muusika (ja ka videomaterjalide) kohta, mida võiksite oma videos kasutada. Kui teil pole juurdepääsu sõbrale, kes saab teile loo kirjutada ja esitada, peate selle leidma autoritasuta muusika taustal mängida. Samuti on kohti, kuhu saate videomaterjali lisada.

Video redigeerimine

Pole tähtis, millist redigeerimistarkvara te kasutate, seni, kuni olete sellega tuttav ja saate seda tõhusalt kasutada. Töölaua videojuhendil Gretchen on mõned professionaalsed videotöötluse näpunäited, mis aitavad teil videoid suurepärase väljanägemise järgi redigeerida.

Salvestage video MOV või AVI (või MPG, CD, DV)

Selle õpetuse ülejäänud osas eeldame, et teie video on salvestatud teatud tüüpi kvaliteetses (tihendamata) vormingus nagu AVI või MOV. Kuigi saate neid faile kasutada sellistena, nagu need on, puutuvad kokku kõik videoga seotud probleemid, mida oleme juba arutanud. Järgmistel lehtedel selgitatakse, kuidas teisendada fail kolme tüüpi, nii et seda saaks vaadata kõige rohkem brausereid.

Teisendage video Firefoxi jaoks Oggiks

Esimene vorming, mille teisendame, on Ogg (mõnikord nimetatakse seda ka Ogg-Theoraks). Seda vormingut saavad vaadata nii Firefox 3.5, Opera 10.5 kui ka Chrome 3.

Kahjuks, kuigi Oggil on brauseritugi, ei paku paljud tuntud videoprogrammid, mida saate osta (Adobe Media Encoder, QuickTime jne), Ogg'i teisendamise võimalust. Nii et ainus viis video Ogg-i teisendamiseks on veebist teisendusprogrammi leidmine.

Teisendamisvalikud

On olemas veebitööriist nimega Media-Convert, mis väidab, et see muudab video (ja heli) erinevad vormingud muudeks video (ja heli) vorminguteks. Kui proovisime seda minu 3-sekundilise testvideoga, ei õnnestunud meil seda minu Macis tööle panna. Kuid sul võib olla parem õnne. Selle saidi eeliseks on tasuta.

Mõned muud leitud tööriistad on:

• Miro Video Converter (Windows Macintosh): Selle programmi eeliseks on teisendamine nii Oggiks kui MP4-ks (H.264) ja see on avatud lähtekoodiga.
• Tasuta Video Converter: Me arvame, et sellel on nii Windowsi kui ka Macintoshi versioon, kuid nende saidilt oli seda raske öelda
• Lihtne Theora kodeerija (Macintosh): see on see, mida me kipume kasutama.

Kui olete oma video Ogg-vormingus salvestanud, salvestage see oma veebisaidi asukohta ja minge järgmisele lehele, et teisendada see teiste brauserite jaoks muudeks vorminguteks.

Teisendage video Safari ja Internet Exploreri MP4-ks

Järgmine vorming, mille peaksite oma video teisendama, on MP4 (H.264 video), et seda saaks esitada Internet Explorer 9 ja uuemates versioonides, Safari 3 ja 4 ning iPhone'is ja Androidis.

See formaat on kommertstoodetes hõlpsamini kättesaadav ja tõenäoliselt on teil juba video redaktori olemasolul programm, mis teisendab MP4-ks. Kui teil on Adobe Premiere võite kasutada Adobe Video Encoderit või kui teil on ka töötav QuickTime Pro. Paljud muundurid, mida eelmisel lehel arutasime, teisendavad videod ka MP4-ks.

• MediaConvert: Veebipõhine AWS-i tööriist.
• Miro Video Converter (Windows Macintosh): Selle programmi eeliseks on teisendamine nii Oggiks kui MP4-ks (H.264) ja see on avatud lähtekoodiga.
• SUPER (Windows): teisendab paljud erinevad failitüübid MP4-ks
• Tasuta Video Converter: Me arvame, et sellel on nii Windowsi kui ka Macintoshi versioon, kuid nende saidilt oli seda raske öelda.

Lisage videoelement oma veebilehele

1. Looge oma veebisait nii, nagu tavaliselt loote:

2. Pange keha sisse
3. Otsustage, millised atribuudid teie videol on: soovitame kasutada juhtnuppe ja eellaadimist. Kui teie videol pole esimest stseeni, kasutage plakativalikut.
   automaatne esitamine - alustamiseks kohe, kui see on alla laaditud
4. juhtnupud - lubage lugejal videot juhtida (paus, tagasikerimine, edasikerimine)
5. loop - käivitage video algusest peale, kui see lõpeb
6. eellaadimine - laadige video alla, et see oleks klienti klõpsates kiiremini valmis
7. plakat - määrake pilt, mida soovite video peatamisel kasutada
8. Seejärel lisage oma video kahe versiooni (MP4 ja OGG) lähtefailid
9. Avage leht Chrome 1-s, Firefox 3.5-s, Opera 10-s ja / või Safari 4-s ning veenduge, et see kuvataks õigesti. Peaksite seda testima vähemalt Firefox 3.5 ja Safari 4 versioonides - kuna mõlemad kasutavad erinevat koodekit.

See selleks. Kui see kood on paigas, on teil video, mis töötab Firefox 3.5, Safari 4, Opera 10 ja Chrome 1. Aga kuidas on lood Internet Exploreriga?

Video lisamiseks veebilehtedele on HTML 5 kasutamine väga lihtne. Enamik kaasaegseid brausereid toetab HTML 5 videot, ehkki kõik ei toeta seda ühtemoodi. Kuid see tähendab, et kui salvestate video nii Ogg kui MP4 vormingus, võite kirjutada vaid neli või viis rida HTML-i, et see kuvataks enamikus kaasaegsetes brauserites (välja arvatud Internet Explorer 8). Nii toimige järgmiselt.

Kirjutage HTML 5 doctype marker nii, et brauserid teaksid HTML 5 oodata:

1. Looge oma veebisait nii, nagu tavaliselt loote:

2. Pange keha sisse
3. Otsustage, millised atribuudid teie videol on: soovitame kasutada juhtnuppe ja eellaadimist. Kui teie videol pole esimest stseeni, kasutage plakativalikut.
   automaatne esitamine - alustamiseks kohe, kui see on alla laaditud
4. juhtnupud - lubage lugejal videot juhtida (paus, tagasikerimine, edasikerimine)
5. loop - käivitage video algusest peale, kui see lõpeb
6. eellaadimine - laadige video alla, et see oleks klienti klõpsates kiiremini valmis
7. plakat - määrake pilt, mida soovite video peatamisel kasutada
8. Seejärel lisage oma video kahe versiooni (MP4 ja OGG) lähtefailid
9. Avage leht Chrome 1-s, Firefox 3.5-s, Opera 10-s ja / või Safari 4-s ning veenduge, et see kuvataks õigesti. Peaksite seda testima vähemalt Firefox 3.5 ja Safari 4 versioonides, kuna mõlemad kasutavad erinevat koodekit.

See selleks. Kui see kood on paigas, on teil video, mis töötab Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ ja Chrome 1.

Testige võimalikult paljudes brauserites

Oma meelerahu huvides peaksite testima ka vanemates brauserites, et näha, mida nad teevad, eriti kui paljud teie lugejad kasutavad vanemaid brausereid.

Videolehtede testimine on ülioluline, kui soovite edukat käivitamist. Peaksite kindlasti testima oma lehte oma veebisaidi kõige populaarsemates brauserites ja versioonides.

Oleme leidnud, et kuigi video testimiseks on võimalik kasutada selliseid tööriistu nagu BrowserLab ja AnyBrowser, pole see nii usaldusväärne kui lehe ise brauserisse toomine. Seda tehes näete tõesti, kas see töötab või mitte.

Kuna nägite vaeva video kodeerimisel mitmes vormingus, peaksite seda testima, et veenduda, et seda kuvatakse mitmes brauseris. See tähendab, et vähemalt peaksite seda testima Firefoxis, Safaris ja IE-s.

Oma meelerahu huvides peaksite testima ka vanemates brauserites, et näha, mida nad teevad, eriti kui paljud teie lugejad kasutavad vanemaid brausereid.

Video töötamine vanemates brauserites

Nagu iga veebisaidi puhul, peaksite kõigepealt kaaluma, kui oluline on nende brauserite tööle panemine. Kui 90% teie klientidest kasutab Netscape'i, peaks teil olema nende jaoks varuplaan. Kuid kui seda teeb vähem kui 1%, ei pruugi see nii oluline olla.

Kui olete otsustanud, milliseid brausereid proovite toetada, on lihtsaim viis luua neile video vaatamiseks lihtsalt alternatiivne leht. Sellele alternatiivsele lehele manustataks video HTML 4 abil. Ja siis kasutage nende ümbersuunamiseks mõnda brauserituvastuse vormi või lisage sellele lehele lihtsalt link sellele lehele.