HTML5 naudojimas vaizdo įrašams rodyti dabartinėse naršyklėse

Savo HTML 5 vaizdo įrašo talpinimas vs. Naudojantis „YouTube“

„YouTube“ yra puiki svetainė. Tai leidžia lengvai įterpti vaizdo įrašą internetiniai puslapiai greitai, ir su kai kuriomis nedidelėmis išimtimis yra gana sklandžiai vykdant tuos vaizdo įrašus. Paskelbę vaizdo įrašą „YouTube“ galite būti tikri, kad jį galės žiūrėti bet kas.

Tačiau „YouTube“ naudojimas vaizdo įrašams įterpti turi tam tikrų trūkumų

Dauguma problemų su „YouTube“ yra vartotojo, o ne dizainerio pusėje, pavyzdžiui:

• Lėta paieška ir indeksavimas
• Serverio sutrikimai
• Turinys pašalinamas (iš pažiūros) savavališkai
• Per daug blogo turinio

Tačiau yra keletas priežasčių, kodėl „YouTube“ yra bloga ir turinio kūrėjams, įskaitant:

• 10 minučių maksimalus vaizdo įrašų ilgis (naudojant nemokamas paskyras)
• Prastas įkėlimo našumas
• „YouTube“ įgyja neribotas jūsų vaizdo įrašo naudojimo teises
• Bet kuris „YouTube“ vartotojas gauna neribotas jūsų vaizdo įrašo naudojimo teises

HTML5 vaizdo įrašas suteikia tam tikrų pranašumų, palyginti su „YouTube“

Naudojant HTML5 Vaizdo įrašai leidžia valdyti kiekvieną vaizdo įrašo aspektą, kas gali jį peržiūrėti, kiek laiko jis turi, koks turinys yra, kur jis priglobtas ir kaip veikia serveris. Ir HTML5 suteikia galimybę užkoduoti vaizdo įrašą tiek formatų, kiek reikia, kad įsitikintumėte, jog maksimalus žmonių skaičius gali jį peržiūrėti. Jūsų klientams nereikia papildinio ir nereikia laukti, kol „YouTube“ išleis naujesnę versiją.

Žinoma, HTML5 vaizdo įrašai turi tam tikrų trūkumų

Jie apima:

• Savo vaizdo įrašą turite užkoduoti mažiausiai trijuose skirtinguose kodekuose.
• Norėdami įsitikinti, kad naršyklės nepalaikomos, turite įtraukti tam tikrą „JavaScript“ HTML5 dirbs.
• Jūsų serveris turi sugebėti patenkinti vaizdo įrašų talpinimo pralaidumo reikalavimus.

Greita vaizdo palaikymo internete apžvalga

Vaizdo įrašų įtraukimas į tinklalapius jau seniai buvo sudėtingas procesas. Buvo tiek daug dalykų, kurie gali suklysti:

• Pirma, jūs naudojate žymą, kad įterptumėte vaizdo įrašą į savo puslapį. BET ta žyma nebenaudojama kitos žymos naudai. Kai kurios naršyklės ir taip niekada nepalaikė.
• Taigi jūs pereinate prie žymą, bet senesnės naršyklės jos nepalaiko, o naujesnės naršyklės ją palaiko eskiziškai.
• Tada pagalvoji Blykstė! Užkoduokite savo vaizdo įrašą kaip FLV failą. Bet Blykstė nebepalaikomas „Windows“ įrenginiuose.
• Taigi nusprendėte įkelti savo vaizdo įrašą į vaizdo įrašų įdėjimo svetainę, pvz., „YouTube“, bet tada iškilo su „YouTube“ susijusių problemų, kurias aptarėme.
• Galiausiai nusprendėte naudoti HTML5, tačiau „Internet Explorer“ jo nepalaiko (tik iki „Internet Explorer 9“). Net jei taip ir darote, yra du palaikomi vaizdo kodekų standartai ir tik viena naršyklė, galinti naudoti abu.

Taigi, ką jūs turėtumėte daryti? Atsisakyti vaizdo įrašo daugumoje svetainių nebėra galimybės, nes vaizdo įrašas tampa vis svarbesnis. Daugelis svetainių sėkmingai perėjo prie vaizdo įrašų.

Šiuose šio straipsnio puslapiuose paaiškinsite, kaip pridėti vaizdo įrašą prie veikiančių tinklalapių „Firefox 3.5“, „Opera 10.5“, „Chrome 3.0“, „Safari 3“ ir „4“, „iPhone“ ir „Android“ bei „Internet Explorer 7“ ir 8. Taip pat turėsite raktus, kuriuos prireikus galėsite pridėti prie kitų senesnių naršyklių.

Sukurkite ir redaguokite savo vaizdo įrašą

Pirmas dalykas, kurio jums reikia, kai ketinate įdėti vaizdo įrašą į tinklalapį, yra tikrasis vaizdo įrašas. Galite kurti nuolat fotografuoti ir redaguoti, kad sukurtumėte funkciją, arba galite jį scenarijuoti ir planuoti iš anksto. Bet kuriuo atveju veikia gerai, viskas, kas jums patogu. Jei nežinote, kokį vaizdo įrašą turėtumėte kurti, peržiūrėkite šias „Desktop Video Guide“ idėjas:

• Šeimos vaizdo projektai
• Rinkodaros ir reklaminiai vaizdo įrašai
• Vaizdo įrašų virtualios ekskursijos
• Kaip vaizdo įrašus
• Vestuvių vaizdo įrašai

Sužinokite, kaip įrašyti aukštos kokybės vaizdo įrašą

Įsitikinkite, kad mokate įrašyti patalpose ir lauke, taip pat kaip įrašyti garsą. Apšvietimas taip pat labai svarbus - per ryškūs kadrai skaudina akis, o per tamsūs tiesiog atrodo purvini ir neprofesionalūs. Net jei planuojate savo svetainėje rodyti tik 30 sekundžių trukmės vaizdo įrašą, tuo aukštesnė jo kokybė, tuo geriau jis atsispindės jūsų svetainėje.

Taip pat atminkite, kad autorių teisės taikomos visiems garsams ar muzikai (taip pat ir filmuotai medžiagai), kurią galbūt norėsite naudoti savo vaizdo įraše. Jei neturite prieigos prie draugo, kuris gali jums parašyti ir paleisti dainą, turėsite rasti nemokama muzika žaisti fone. Taip pat yra vietų, kuriose galite kaupti filmuotą medžiagą ir pridėti prie savo vaizdo įrašų.

Redaguoti vaizdo įrašą

Nesvarbu, kokią redagavimo programinę įrangą naudojate, jei tik esate su ja susipažinę ir galite ją efektyviai naudoti. „Gretchen“, darbalaukio vaizdo vadovas, turi keletą profesionalių vaizdo įrašų redagavimo patarimų, kurie gali padėti redaguoti vaizdo įrašus, kad jie atrodytų puikiai.

Išsaugokite vaizdo įrašą į MOV arba AVI (arba MPG, CD, DV)

Kitoje šios pamokos dalyje mes manysime, kad jūsų vaizdo įrašas buvo išsaugotas kokio nors tipo aukštos kokybės (nesuspausto) formato, pvz., AVI ar MOV. Nors galite naudoti šiuos failus tokius, kokie jie yra, susiduriate su visomis jau aptartomis vaizdo įrašo problemomis. Šiuose puslapiuose paaiškinta, kaip konvertuoti failą į tris tipus, kad jį matytų daugiausiai naršyklių.

Konvertuokite vaizdo įrašą į „Ogg“, skirtą „Firefox“

Pirmasis formatas, kurį konvertuosime, yra „Ogg“ (kartais vadinamas „Ogg-Theora“). Šį formatą gali peržiūrėti „Firefox 3.5“, „Opera 10.5“ ir „Chrome 3“.

Deja, nors „Ogg“ palaiko naršyklę, daugelyje gerai žinomų vaizdo programų, kurias galite įsigyti („Adobe Media Encoder“, „QuickTime“ ir kt.), „Ogg“ konversijos parinktis nesiūloma. Taigi vienintelis būdas konvertuoti vaizdo įrašą į „Ogg“ yra rasti internete konversijos programą.

Konversijos parinktys

Yra internetinis įrankis, pavadintas „Media-Convert“, kuris teigia, kad įvairius vaizdo (ir garso) formatus paverčia kitais vaizdo (ir garso) formatais. Kai bandėme tai atlikti su mano 3 sekundžių bandomuoju vaizdo įrašu, negalėjome pasiekti, kad jis veiktų mano „Mac“. Bet jums gali pasisekti geriau. Ši svetainė yra nemokama.

Kai kurie kiti mūsų rasti įrankiai yra šie:

• „Miro“ vaizdo keitiklis („Windows Macintosh“): Šios programos privalumas yra konvertuoti į „Ogg“ ir „MP4“ (H.264) bei atvirąjį kodą.
• Nemokamas vaizdo keitiklis: Manome, kad tai turi ir „Windows“, ir „Macintosh“ versiją, tačiau iš jų svetainės buvo sunku tai pasakyti
• Paprastas „Theora Encoder“ („Macintosh“): Tai mes dažniausiai naudojame.

Išsaugoję vaizdo įrašą „Ogg“ formatu, išsaugokite jį savo svetainės vietoje ir eikite į kitą puslapį, kad konvertuotumėte jį į kitus naršyklių formatus.

Konvertuokite vaizdo įrašą į MP4, skirtą „Safari“ ir „Internet Explorer“

Kitas formatas, į kurį turėtumėte konvertuoti vaizdo įrašą, yra MP4 (H.264 vaizdo įrašas), kad jį būtų galima atkurti „Internet Explorer 9“ ir naujesnėse versijose, „Safari 3“ ir „4“ bei „iPhone“ ir „Android“.

Šis formatas lengviau pasiekiamas komerciniuose produktuose, ir jūs tikriausiai jau turite programą, kuri konvertuojama į MP4, jei turite vaizdo įrašų redaktorių. Jei turite „Adobe Premiere“ galite naudoti „Adobe Video Encoder“ arba, jei turite „QuickTime Pro“, kuris taip pat veikia. Daugelis keitiklių, kuriuos aptarėme ankstesniame puslapyje, taip pat konvertuoja vaizdo įrašus į MP4.

• „MediaConvert“: Internetinis AWS įrankis.
• „Miro“ vaizdo keitiklis („Windows Macintosh“): Šios programos privalumas yra konvertuoti į „Ogg“ ir „MP4“ (H.264) bei atvirąjį kodą.
• SUPER („Windows“): pavers daug skirtingų failų tipų į MP4
• Nemokamas vaizdo keitiklis: Manome, kad tai turi ir „Windows“, ir „Macintosh“ versiją, tačiau iš jų svetainės buvo sunku tai pasakyti.

Pridėkite vaizdo įrašo elementą prie savo tinklalapio

1. Susikurkite savo tinklalapį taip, kaip paprastai kuriate:

2. Kūno viduje uždėkite
3. Nuspręskite, kokius atributus norite turėti savo vaizdo įraše: rekomenduojame naudoti valdiklius ir iš anksto įkelti. Naudokite plakato parinktį, jei vaizdo įraše nėra geros pirmosios scenos.
   automatinis grojimas - pradėti iškart, kai tik atsisiunčiama
4. valdikliai - leiskite skaitytojams valdyti vaizdo įrašą (pristabdyti, atsukti atgal, pirmyn)
5. ciklas - pradėkite vaizdo įrašą nuo pradžios, kai jis baigsis
6. išankstinis įkėlimas - iš anksto atsisiųskite vaizdo įrašą, kad jis būtų paruoštas greičiau, kai klientas jį spustelės
7. plakatas - apibrėžkite vaizdą, kurį norite naudoti sustabdžius vaizdo įrašą
8. Tada pridėkite dviejų vaizdo įrašo versijų (MP4 ir OGG) šaltinio failus
9. Atidarykite „Chrome 1“, „Firefox 3.5“, „Opera 10“ ir (arba) „Safari 4“ puslapį ir įsitikinkite, kad jis rodomas tinkamai. Turėtumėte jį išbandyti bent jau „Firefox 3.5“ ir „Safari 4“ - nes kiekvienas naudoja skirtingą kodeką.

Viskas. Kai turėsite šį kodą, turėsite vaizdo įrašą, kuris veikia „Firefox 3.5“, „Safari 4“, „Opera 10“ ir „Chrome 1“. Bet ką daryti su „Internet Explorer“?

Labai paprasta naudoti HTML 5 norint pridėti vaizdo įrašą prie tinklalapių. Dauguma šiuolaikinių naršyklių palaiko „HTML 5“ vaizdo įrašus, nors ne visos palaiko tą patį. Bet tai reiškia, kad jei išsaugote vaizdo įrašą tiek „Ogg“, tiek MP4 formatu, galite parašyti tik keturias ar penkias HTML eilutes, kad jis būtų rodomas daugumoje šiuolaikinių naršyklių (išskyrus „Internet Explorer 8“). Štai kaip:

Parašykite HTML 5 doctype žymeklį, kad naršyklės žinotų, kad tikisi HTML 5:

1. Susikurkite savo tinklalapį taip, kaip paprastai kuriate:

2. Kūno viduje uždėkite
3. Nuspręskite, kokius atributus norite turėti savo vaizdo įraše: rekomenduojame naudoti valdiklius ir iš anksto įkelti. Naudokite plakato parinktį, jei vaizdo įraše nėra geros pirmosios scenos.
   automatinis grojimas - pradėti iškart, kai tik atsisiunčiama
4. valdikliai - leiskite skaitytojams valdyti vaizdo įrašą (pristabdyti, atsukti atgal, pirmyn)
5. ciklas - pradėkite vaizdo įrašą nuo pradžios, kai jis baigsis
6. išankstinis įkėlimas - iš anksto atsisiųskite vaizdo įrašą, kad jis būtų paruoštas greičiau, kai klientas jį spustelės
7. plakatas - apibrėžkite vaizdą, kurį norite naudoti sustabdžius vaizdo įrašą
8. Tada pridėkite dviejų vaizdo įrašo versijų (MP4 ir OGG) šaltinio failus
9. Atidarykite „Chrome 1“, „Firefox 3.5“, „Opera 10“ ir (arba) „Safari 4“ puslapį ir įsitikinkite, kad jis rodomas tinkamai. Turėtumėte jį išbandyti bent jau „Firefox 3.5“ ir „Safari 4“, nes kiekvienas naudoja skirtingą kodeką.

Viskas. Kai turėsite šį kodą, turėsite vaizdo įrašą, kuris veikia „Firefox 3.5“, „Safari 4“, „Opera 10“, „Internet Explorer 9+“ ir „Chrome 1“.

Išbandykite kuo daugiau naršyklių

Siekdami ramybės, turėtumėte išbandyti ir senesnes naršykles, kad pamatytumėte, ką jie daro, ypač jei daugelis jūsų skaitytojų naudoja senesnes naršykles.

Vaizdo puslapių testavimas yra labai svarbus, jei norite sėkmingai paleisti. Turėtumėte būti tikri, kad išbandysite savo puslapį populiariausiose naršyklėse ir savo svetainės versijose.

Mes nustatėme, kad nors bandant vaizdo įrašą galima naudoti tokius įrankius kaip „BrowserLab“ ir „AnyBrowser“, jis nėra toks patikimas, kaip pats atversti puslapį naršyklėje. Tai padarę tikrai galite pamatyti, ar jis veikia, ar ne.

Kadangi jūs stengėtės koduoti vaizdo įrašą keliais formatais, turėtumėte išbandyti, kad įsitikintumėte, jog jis rodomas keliose naršyklėse. Tai reiškia, kad bent jau turėtumėte tai išbandyti „Firefox“, „Safari“ ir IE.

Siekdami ramybės, turėtumėte išbandyti ir senesnes naršykles, kad pamatytumėte, ką jie daro, ypač jei daugelis jūsų skaitytojų naudoja senesnes naršykles.

Vaizdo įrašo veikimas senesnėse naršyklėse

Kaip ir kiekviename tinklalapyje, pirmiausia turėtumėte apsvarstyti, kaip svarbu tas naršykles veikti. Jei 90% jūsų klientų naudojasi „Netscape“, turėtumėte turėti atsarginį jų planą. Bet jei tai daro mažiau nei 1%, tai gali būti ne tiek svarbu.

Nusprendę, kokias naršykles bandysite palaikyti, paprasčiausias būdas yra tiesiog sukurti pakaitinį puslapį, kuriame jie galėtų peržiūrėti vaizdo įrašą. Tame alternatyviame puslapyje įdėtumėte vaizdo įrašą naudodami HTML 4. Tada naudokite tam tikrą naršyklės aptikimo formą, kad jas nukreiptumėte, arba tiesiog pridėkite nuorodą į šį puslapį šiame puslapyje.