Pinapadali ng tag ng HTML5 video na magdagdag ng video sa iyong mga pahina sa Web. Ngunit habang mukhang madali sa ibabaw, maraming mga bagay na kailangan mong gawin upang makuha ang iyong video at tumatakbo. Dadalhin ka ng tutorial na ito sa pamamagitan ng mga hakbang upang lumikha ng isang pahina sa HTML5 na magpapatakbo ng video sa lahat ng mga modernong browser.
- Pagho-host ng Iyong Sariling HTML5 Video kumpara sa Paggamit ng YouTube
- Mabilis na Pangkalahatang-ideya ng Suporta ng Video sa Web
- Lumikha at Mag-edit ng Iyong Video
- I-convert ang Video sa Ogg para sa Firefox
- I-convert ang Video sa MP4 para sa Safari
- I-convert ang Video sa FLV para sa Internet Explorer
- Idagdag ang Elemento ng Video sa Iyong Web Page
- Idagdag ang JavaScript at Flash Player upang Kumuha ng Internet Explorer na Magtrabaho
- Subukan sa Tulad ng Maraming Browser Kung Magagawa mo
Pag-host ng Iyong Sariling HTML 5 Video kumpara sa Paggamit ng YouTube
Ang YouTube ay isang mahusay na site. Ginagawang madaling i-embed ang video sa mga pahina ng Web nang mabilis, at may ilang mga menor de edad na eksepsiyon ay medyo walang pinagtahian sa pagpapatupad ng mga video na iyon. Kung nagpo-post ka ng isang video sa YouTube, maaari kang maging lubos na nagtitiwala na maaaring makita ng sinuman ito.
Ngunit ang Paggamit ng YouTube sa I-embed ang Iyong Mga Video May Mga Kakulangan
Karamihan sa mga problema sa YouTube ay nasa panig ng mamimili, sa halip na sa side designer, mga bagay na tulad ng:
- Mabagal na paghahanap at pag-index
- Mga pagkaantala sa server
- Nililimitahan ang nilalaman (tila)
- Masyadong masamang nilalaman
Ngunit may ilang mga kadahilanan kung bakit ang YouTube ay masama para sa mga developer ng nilalaman pati na rin:
- 10 minutong maximum na haba para sa mga video (para sa mga libreng account)
- Mahina mag-upload ng pagganap
- Kinukuha ng YouTube ang walang limitasyong mga karapatan sa paggamit sa iyong video
- Ang anumang YouTube user ay makakakuha ng walang limitasyong mga karapatan sa paggamit sa iyong video
Binibigyan ng Video ng HTML5 ang ilang mga Kalamangan Higit sa YouTube
Ang paggamit ng HTML5 para sa video ay hahayaan kang makontrol ang bawat aspeto ng iyong video, mula sa kung sino ang maaaring tumingin nito, gaano katagal ito, kung ano ang naglalaman ng nilalaman, kung saan ito ay naka-host at kung paano gumaganap ang server. At ang HTML5 na video ay nagbibigay sa iyo ng pagkakataong i-encode ang iyong video sa maraming mga format na kailangan mong tiyakin na ang pinakamataas na bilang ng mga tao ay maaaring tingnan ito. Ang iyong mga customer ay hindi kailangan ng isang plugin o maghintay hanggang sa makapagbigay ang YouTube ng mas bagong bersyon.
Ng Kurso, Nag-aalok ng HTML5 Video Ang ilang mga Drawbacks
Kabilang dito ang:
- Kailangan mong i-encode ang iyong video sa hindi bababa sa tatlong magkakaibang codec
- Kailangan mong isama ang ilang JavaScript upang matiyak na gagana ang mga browser na hindi sumusuporta sa HTML5
- Dapat na mahawakan ng iyong server ang mga kinakailangan ng bandwidth ng pagho-host ng mga video
Magpatuloy sa Pagbasa Sa ibaba
02 ng 10Mabilis na Pangkalahatang-ideya ng Suporta ng Video sa Web
Mahabang naging proseso ang pagdaragdag ng video sa mga pahina sa Web. Maraming mga bagay na maaaring magkamali:
- Una, gagamitin mo ang tag upang i-embed ang iyong video sa iyong pahina. NGUNIT ang tag na iyon ay wala na sa pabor ng ibang tag. At ang ilang mga browser ay hindi pa rin sinusuportahan ito.
- Kaya lumipat ka sa tag, ngunit hindi sinusuportahan ng mas lumang mga browser ang mga ito at ang mas bagong mga browser ay hindi maayos sa suporta nito.
- Pagkatapos ay sa tingin mo Flash! At i-encode ang iyong video bilang isang FLV file. Ngunit ang Flash ay hindi suportado sa maraming mga mobile device at maraming mga tao na ayaw ng Flash kahit gaano ito ginagamit (25% ng mga respondent sa aking poll na nagtatanong tungkol sa kung ano ang nararamdaman mo tungkol sa Flash na nakasaad na hindi sila maaaring tumayo Flash sa anumang paraan).
- Kaya't nagpasya kang i-upload ang iyong video sa isang site ng pag-embed ng video tulad ng YouTube, ngunit mayroon ka pang mga isyu sa YouTube na aming tinalakay.
- Sa wakas, nagpasya kang pumunta sa HTML5, ngunit hindi sinusuportahan ng Internet Explorer ito (hindi hanggang sa Internet Explorer 9). At kahit na gagawin mo, may dalawang mga pamantayan ng video codec na sinusuportahan at isang browser lang ang maaaring magamit. Suporta sa Browser para sa Mga Video Codec at Container
Kaya ano ang dapat mong gawin? Ang pagtaas sa video ay hindi na isang opsyon para sa karamihan sa mga site, habang ang video ay nagiging mas at mas mahalaga. At maraming mga site ay matagumpay na lumipat sa video.
Ang mga sumusunod na pahina ng artikulong ito ay tutulong sa iyo kung paano magdagdag ng video sa iyong mga pahina sa Web na gumagana sa Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 at 4, iPhone at Android, Flash, at Internet Explorer 7 at 8. Magagawa mo mayroon din ang mga key na kailangan mong magdagdag ng suporta para sa iba pang mga mas lumang mga browser kung kinakailangan.
Magpatuloy sa Pagbasa Sa ibaba
03 ng 10Lumikha at Mag-edit ng Iyong Video
Ang unang bagay na kailangan mo kapag naglalagay ka ng isang video sa isang Web page ay ang aktwal na video. Maaari mong patuloy na pagbaril at i-edit pagkatapos upang lumikha ng isang tampok, o maaari mong i-script ito at planuhin ito nang maaga. Ang alinman sa paraan ay gumagana ng maayos, ito ay lamang ng anumang ikaw ay komportable sa. Kung hindi mo alam kung anong uri ng video ang dapat mong gawin, tingnan ang mga ideya na ito mula sa Gabay sa Desktop Video:
- Mga Proyekto sa Pamilya ng Video
- Marketing at Mga Video Promo
- Video Virtual Tours
- Paano sa Mga Video
- Mga Video sa Kasal
Alamin kung Paano Mag-Record ng Mataas na Marka ng Video
Tiyaking alam mo kung paano i-record ang mga nasa loob at labas pati na rin kung paano mag-record ng audio. Mahalaga rin ang pag-iilaw - ang mga pag-shot na masyadong maliwanag na saktan ang mga mata, at masyadong madilim ay mukhang maputik at hindi propesyonal. Kahit na plano mo lamang magkaroon ng isang 30 segundong video sa iyong site, ang mas mataas na kalidad na ito ay mas mahusay na ito ay sumasalamin sa iyong website.
Tandaan din na naaangkop ang copyright sa anumang mga tunog o musika (pati na rin ang footage ng stock) na maaari mong gamitin sa iyong video. Kung wala kang access sa isang kaibigan na maaaring sumulat at maglaro ng isang kanta para sa iyo, kakailanganin mong makahanap ng walang royalty na musika upang i-play sa background. Mayroon ding mga lugar na maaari mong stock footage upang idagdag sa iyong mga video.
Pag-edit ng Iyong Video
Hindi mahalaga kung anong software sa pag-edit ang iyong ginagamit, hangga't pamilyar ka sa mga ito at maaaring gamitin ito nang epektibo. Si Gretchen, ang Gabay sa Desktop Video, ay may ilang mga propesyonal na tip sa pag-edit ng video na maaaring makatulong sa iyo na i-edit ang iyong mga video upang tumingin sila ng mahusay.
I-save ang Iyong Video sa isang MOV o AVI (o MPG, CD, DV)
Para sa natitirang bahagi ng tutorial na ito, ipapalagay namin na naka-save ang iyong video sa ilang uri ng mataas na kalidad (hindi naka-compress) na format tulad ng AVI o MOV. Habang maaari mong gamitin ang mga file na ito bilang mga ito, tumakbo ka sa lahat ng mga problema sa video na tinalakay na namin. Ipapaliwanag ng mga sumusunod na pahina kung paano i-convert ang iyong file sa tatlong uri upang maipakita ito sa pinakamalaking bilang ng mga browser.
04 ng 10I-convert ang Video sa Ogg para sa Firefox
Ang unang format na aming i-convert ay Ogg (minsan ay tinatawag na Ogg-Theora). Ang format na ito ay isa na maaaring tingnan ng Firefox 3.5, Opera 10.5, at Chrome 3.
Sa kasamaang palad, samantalang ang Ogg ay may suporta sa browser, marami sa mga kilalang programa ng video na maaari mong bilhin (Adobe Media Encoder, QuickTime, atbp.) Ay hindi nag-aalok ng pagpipilian sa conversion ng Ogg. Kaya ang tanging paraan upang i-convert ang iyong video sa Ogg ay upang makahanap ng isang programa ng conversion sa Web.
Mga Pagpipilian sa Conversion
May isang tool sa online na tinatawag na Media-Convert na inaangkin na i-convert ang iba't ibang mga format ng video (at audio) sa iba pang mga video (at audio) na mga format. Kapag sinubukan namin ito sa aking 3-segundong video ng pagsubok, hindi namin ito maaaring magamit sa aking Mac. Ngunit maaari kang magkaroon ng mas magandang kapalaran. Ang site na ito ay may pakinabang ng pagiging libre.
Ang ilang iba pang mga tool na nakita namin ay kinabibilangan ng:
- Miro Video Converter (Windows Macintosh) - Ang program na ito ay may pakinabang ng pag-convert sa parehong Ogg at MP4 (H.264) at ito ay bukas na mapagkukunan.
- Koyote Video Converter (Windows)
- Free Video Converter Tingin namin ito ay parehong isang Windows at isang Macintosh bersyon, ngunit ito ay mahirap na sabihin mula sa kanilang site
- Simple Theora Encoder (Macintosh) - ito ay ang isa naming malamang na gamitin.
Sa sandaling nai-save ang iyong video sa format ng Ogg, i-save ito sa isang lokasyon sa iyong website at pumunta sa susunod na pahina upang i-convert ito sa iba pang mga format para sa iba pang mga browser.
Magpatuloy sa Pagbasa Sa ibaba
05 ng 10I-convert ang Video sa MP4 para sa Safari
Ang susunod na format na dapat mong i-convert ang iyong video sa MP4 (H.264 video) upang maaari itong ma-play sa Safari 3 at 4 at ang iPhone at Android. Dagdag pa, ang mga video na H.264 ay maaaring madaling ma-convert sa FLV file para sa panonood sa Flash.
Ang format na ito ay mas madaling magagamit sa mga komersyal na produkto, at malamang mayroon kang isang programa na magko-convert sa MP4 kung mayroon kang isang editor ng video. Kung mayroon kang Adobe Premiere maaari mong gamitin ang Adobe Video Encoder, o kung mayroon kang QuickTime Pro na gagana rin. Marami sa mga converter na aming tinalakay sa naunang pahina ay i-convert din ang mga video sa MP4.
- MediaConvert - Isang tool sa online na AWS.
- Miro Video Converter (Windows Macintosh) - Ang program na ito ay may pakinabang ng pag-convert sa parehong Ogg at MP4 (H.264) at ito ay bukas na mapagkukunan.
- SUPER (Windows) - i-convert ang maraming iba't ibang mga uri ng file sa MP4 at FLV
- Free Video Converter Tingin namin ito ay parehong isang Windows at isang Macintosh bersyon, ngunit ito ay mahirap na sabihin mula sa kanilang site.
I-save ang iyong MP4 file sa iyong website at pagkatapos ay kakailanganin mong i-convert ito sa Flash para sa paggamit ng Internet Explorer.
06 ng 10I-convert ang Video sa FLV para sa Internet Explorer
Ang pinakamadaling paraan upang i-convert ang mga video sa FLV ay ang paggamit mismo ng Flash. Iyon ay kung paano namin i-convert ang aking mga video sa Flash. Ngunit kung wala kang Flash, narito ang dalawang tanyag na tool para sa pag-convert ng mga file sa FLV:
- SUPER (Windows) - i-convert ang maraming iba't ibang mga uri ng file sa MP4 at FLV
- ffmpegX (Macintosh) - Magko-convert ng maraming iba't ibang mga uri ng file sa Mp4 at FLV.
I-save ang iyong FLV file sa iyong website at ipapakita sa iyo ng susunod na pahina kung paano isulat ang HTML upang maaari mong i-play ang iyong mga video.
Magpatuloy sa Pagbasa Sa ibaba
07 ng 10Idagdag ang Elemento ng Video sa Iyong Web Page
Napakadaling gamitin ang HTML 5 upang magdagdag ng video sa mga pahina sa Web. Sinusuportahan ng karamihan ng mga modernong browser ang HTML 5 na video, bagaman hindi nila sinusuportahan ang lahat ng ito sa parehong paraan. Ngunit kung ano ang ibig sabihin nito ay kung i-save mo ang iyong video bilang parehong mga format ng Ogg at MP4, makakapagsulat ka lamang ng apat o limang linya ng HTML upang maipakita ito sa karamihan sa mga modernong browser (maliban sa Internet Explorer 8). Ganito:
Isulat ang marker ng HTML 5 na dokumento upang malaman ng mga browser na asahan ang HTML 5:
- Likhain ang iyong Web page gaya ng karaniwang ginagawa mo ito:
- Sa loob ng katawan, ilagay ang
- Magpasya kung anong mga katangian ang nais mong magkaroon ng iyong video: Inirerekumenda namin ang paggamit ng mga kontrol at preload. Gamitin ang pagpipiliang poster kung ang iyong video ay walang magandang unang eksena.
- autoplay - upang simulan sa lalong madaling nai-download
- mga kontrol - payagan ang iyong mga mambabasa na kontrolin ang video (i-pause, rewind, mabilis-forward)
- loop - simulan ang video mula sa simula kapag natapos ito
- preload - i-download ang video nang sa gayon ay handa nang mas mabilis kapag nag-click ang customer dito
- poster - tukuyin ang imahe na nais mong gamitin kapag ang video ay tumigil
- Pagkatapos ay idagdag ang mga source file para sa dalawang bersyon ng iyong video (MP4 at OGG) sa loob ng
- Buksan ang pahina sa Chrome 1, Firefox 3.5, Opera 10, at / o Safari 4 at tiyaking tama ang ipinapakita nito. Dapat mong subukan ito sa hindi bababa sa Firefox 3.5 at Safari 4 - habang ang bawat isa ay gumagamit ng ibang codec.
Ayan yun. Sa sandaling mayroon ka ng code na ito sa lugar magkakaroon ka ng video na gumagana sa Firefox 3.5, Safari 4, Opera 10, at Chrome 1. Ngunit ano ang tungkol sa Internet Explorer?
Ang Internet Explorer Hindi Tulad ng HTML 5 o ang
Sa susunod na seksyon, Kami ay makipag-usap tungkol sa kung ano ang maaari mong gawin upang makakuha ng IE 8 upang i-play ng mabuti sa iyong HTML 5 tag ng video at magpakita ng isang video. Kailangan mong magamit ang Flash.Ang magandang balita ay ang IE 9 ay inaasahan na suportahan ang HTML 5 at tag ng video.
08 ng 10Idagdag ang JavaScript at Flash Player upang Kumuha ng Internet Explorer na Magtrabaho
Maaaring napansin mo na sa HTML ng nakaraang pahina, walang source line para sa FLV file. At kung sinubukan mo ang pahinang iyon sa Internet Explorer hindi ito gagana. Iyon ay dahil hindi nakikilala ng Internet Explorer ang HTML 5 at hindi ito maaaring maglaro ng alinman sa OGG o MP4 na video natively. Upang makakuha ng Internet Explorer 7 at 8 upang gumana, kailangan mo itong i-play ang video bilang Flash. Ngunit mayroong higit pang mga hakbang sa pagkuha ito sa trabaho kaysa sa pagdaragdag lamang ng FLV file.
Hakbang 1: Kumuha ng Flash Video Player para sa Iyong Website
Inirerekumenda namin ang pagkuha ng FlowPlayer dahil ito ay isang open source Flash video player na maaari mong i-install sa iyong Web server at gamitin kapag mayroon kang Flash video upang i-play. Ang libreng bersyon ng FlowPlayer ay nagpapasok ng advertising sa iyong mga video, ngunit maaari ka ring bumili ng mga lisensya sa komersyal kung kailangan mo ang mga ito.
Sundin ang mga tagubilin sa FlowPlayer site upang mai-install ang FlowPlayer sa iyong website. Sa madaling sabi, mag-i-install ka ng 2 SWF file at isang JavaScript file sa iyong site. Sa ilalim ng iyong HTML, (bago ang tag) ay magdaragdag ka ng isang linya:
Ngunit hindi pa rin i-play ng Internet Explorer ang video, kailangan mong turuan ito kung paano makilala ang mga tag na HTML 5.
Hakbang 2: Kumbinsihin ang Internet Explorer na Magbasa ng HTML 5 Mga Tag
Mayroong isang madaling gamitin na script sa Google Code na tinatawag na "HTML Shiv" na makakatulong sa IE makilala ang mga elemento ng HTML 5. Kaya sa
ng iyong HTML na dokumento na gusto mong i-reference ito. Pinakamainam na ilakip ito sa IE conditional comments upang ang iba pang mga browser ay hindi nalilito:
Okay, ngayon IE ay makilala ang
