Tag video HTML 5 matak ngamudahkeun pikeun nambahkeun video pikeun anjeun kaca Wéb . Tapi bari nembongan gampang dina beungeut cai, aya loba hal nu kudu maneh mun keur meunang video Anjeun nepi na ngajalankeun. Tutorial ieu bakal butuh anjeun ngaliwatan léngkah pikeun nyieun kaca dina HTML 5 anu baris ngajalankeun video dina sakabéh panyungsi nu modern.
- Hosting anjeun sorangan HTML 5 Video vs Maké YouTube
- Ihtisar gancang Rojongan Video on Ramat
- Jieun na Édit Video anjeun
- Ngarobah pidio pikeun Ogg pikeun Firefox
- Ngarobah éta pidio kana mp4 pikeun Safari
- Ngarobah pidio pikeun flv pikeun Internet Explorer
- Nambah Unsur Video pikeun Page Web anjeun
- Nambah JavaScript jeung Flash Player keur Cokot Internet Explorer jeung Gawé Part 1
- Test di Salaku Loba panyungsi Salaku Anjeun Bisa
01 10
Hosting anjeun sorangan HTML 5 Video vs Maké YouTube
YouTube nyaéta situs hébat. Ieu matak ngamudahkeun pikeun Lebetkeun video kana kaca Wéb gancang, sarta kalawan sababaraha iwal minor téh cukup seamless dina palaksanaan na jalma video. Lamun masangkeun video on YouTube, Anjeun bisa adil yakin saha bakal tiasa lalajo eta.
Tapi Maké YouTube kana Lebetkeun Pidio anjeun Mibanda Sababaraha drawbacks
Paling masalah kalayan YouTube téh di sisi konsumen, tinimbang dina samping desainer, hal kawas:
- néangan slow sarta indexing
- server outages
- Eusi keur dihapus (sahingga bisa hirup kalawan) wenang
- Teuing kandungan goréng
Tapi aya sababaraha alesan naha YouTube anu goréng pikeun pamekar eusi ogé, kaasup:
- 10-menit panjangna maksimum pikeun video (pikeun rekening bébas)
- kinerja unggah Miskin
- YouTube gains hak pamakéan taya ka video Anjeun
- Sagala pamaké YouTube gains hak pamakéan taya ka video Anjeun
HTML 5 Video Masihan Sababaraha Kaunggulan Leuwih YouTube
Ngagunakeun HTML 5 pikeun video bakal ngantep anjeun ngadalikeun unggal aspék video Anjeun, ti saha bisa nempo éta, sabaraha lila éta, naon eusi ngandung, dimana ayeuna teh hosted jeung kumaha ngalaksanakeun server. Sarta HTML 5 video méré Anjeun kasempetan encode video anjeun dina saloba format anjeun kedah pastikeun yén jumlah maksimum urang bisa nempo éta. konsumén Anjeun teu kedah plugin atawa ngadagoan dugi YouTube Kaluaran versi anyar.
Tina Kursus, HTML 5 Video Nawarkeun Sababaraha drawbacks
Ieu di antarana:
- Anjeun kudu encode video anjeun dina sahanteuna tilu CODEC béda
- Anjeun kudu ngawengku sababaraha JavaScript pikeun mastikeun panyungsi anu teu ngarojong HTML 5 baris dianggo
- server anjeun geus bisa nélépon ka sarat bandwidth video hosting
02 10
Ihtisar gancang Rojongan Video on Ramat
Nambahkeun video ka kaca Wéb geus lila hiji prosés hésé. Aya kitu loba hal anu bisa balik salah:
- Kahiji, anjeun nganggo
tag ka Lebetkeun video Anjeun ka kaca anjeun. Tapi tag anu deprecated di ni'mat tag sejen. Jeung sababaraha panyungsi pernah dirojong dinya ogé atoh. - Jadi maneh pindah ka
tag, tapi panyungsi heubeul teu ngarojong eta na panyungsi anyar anu sketchy di rojongan na. - Lajeng mikir " Flash !" Sarta encode video anjeun minangka file flv. Tapi Flash teu dirojong dina loba alat nu bagerak jeung loba jalma hate Flash euweuh urusan sabaraha ayeuna teh dipake (25% responden di abdi polling nanyakeun ngeunaan kumaha aran ngeunaan Flash nyatakeun yén maranéhna moal bisa nangtung Flash sagala cara).
- Jadi maneh mutuskeun unggah video anjeun ka situs video embedding kawas YouTube, tapi lajeng anjeun boga isu kalawan YouTube kami dibahas.
- Tungtungna, anjeun mutuskeun balik kalawan HTML 5, tapi Internet Explorer henteu ngarojong eta (teu dugi Internet Explorer 9). Komo lamun ngalakukeun, aya dua standar video codec nu dirojong sarta ngan hiji browser nu bisa ngagunakeun duanana. Browser Rojongan kanggo Video CODEC na peti
Ku kituna naon nu sakuduna dituju maneh mun? Jokowi up on video geus euweuh hiji pilihan pikeun paling situs, salaku video nu geus jadi beuki loba penting. Sarta loba situs geus suksés switched pikeun video.
Kaca di handap ieu tina artikel ieu bakal lengkah anjeun ngaliwatan cara nambahkeun video ka kaca Wéb anjeun nu dianggo dina Firefox 3.5, Opera 10,5, Chrome 3.0, Safari 3 jeung 4, iPhone jeung Android, Flash, tur Internet Explorer 7 na 8. Anjeun bakal ogé boga kenop nu peryogi pikeun nambahkeun rojongan pikeun panyungsi heubeul lianna upami diperlukeun.
03 10
Jieun na Édit Video anjeun
Hal kahiji anjeun kedah lamun Anjeun keur bade nempatkeun video dina kaca Wéb teh video nu sabenerna. Anjeun tiasa boh moto mayeng tur edit afterward mun nyieun fitur a, atawa Anjeun tiasa Aksara dinya sarta rencanana eta kaluar payun waktu. Jalan jalan ogé, éta ngan naon anjeun nyaman sareng. Mun anjeun teu nyaho kumaha tipe video kudu nyieun, pariksa kaluar ide ieu ti Video Guide Desktop:
- Projects Video kulawarga
- Marketing sarta promosi Pidio
- Video Virtual Tours
- Kumaha Pidio
- Pidio kawinan
Diajar Kumaha mun Rékam High-Quality Video
Pastikeun anjeun terang kumaha ngarekam jero rohangan na ker kitu ogé kumaha carana ngarekam audio. Cahaya oge pohara penting - nembak anu caang teung menyakiti panon, sarta poék ngan kasampak bécék sarta unprofessional. Malah lamun ukur rencana pikeun boga video 30 detik dina situs anjeun, kualitas luhur eta teh hadé éta baris muhasabah ramatloka anjeun.
Inget teuing nu hak cipta manglaku ka sagala sora atawa musik (kitu oge footage stock) nu bisa rék dipaké dina video Anjeun. Mun anjeun teu mibanda aksés ka sobat anu tiasa nyerat sareng maénkeun lagu pikeun anjeun, anjeun bakal kudu manggihan musik royalti-bébas maénkeun di tukang. Aya ogé tempat anjeun tiasa stock footage pikeun nambahkeun kana video Anjeun.
Ngédit Video anjeun
Henteu masalah naon software na rohangan ngédit Anjeun nganggo, ngan kitu salami anjeun wawuh jeung eta na bisa make eta éféktif. Gretchen, anu Video Guide Desktop, boga sababaraha tips na rohangan ngédit video profésional anu bisa mantuan Anjeun ngédit video Anjeun ambéh maranéhanana kasampak hébat.
Simpen Video anjeun ka MOV atanapi AVI (atawa MPG, CD, DV)
Pikeun sesa tutorial ieu, urang bade nganggap geus video Anjeun disimpen di sababaraha tipe kualitas luhur (non-dikomprés) format kawas AVI atanapi MOV. Bari bisa make payil ieu sakumaha aranjeunna, anjeun ngajalankeun kana sagala masalah sareng video nu urang geus geus dibahas. Kaca di handap ieu bakal ngajelaskeun kumaha carana ngarobah koropak anjeun kana tilu jenis meh bisa viewable ku jumlah pangbadagna panyungsi.
04 10
Ngarobah pidio pikeun Ogg pikeun Firefox
The format munggaran urang ngarobah kana mangrupa Ogg (kadangkala disebut Ogg-Theora). format Ieu salah anu Firefox 3.5, Opera 10,5, sarta Chrome 3 tiasa sadayana tempoan.
Hanjakal, bari Ogg boga rojongan browser, loba program video well-dipikawanoh nu bisa Anjeun meuli (Adobe Media Encoder, QuickTime, jsb) teu nawiskeun hiji pilihan konversi Ogg. Jadi hijina cara pikeun ngarobah video anjeun ka Ogg nyaéta pikeun manggihan program konversi kana Web teh.
konversi Options
Aya hiji alat online disebut Media-ngarobah éta ngaklaim ngarobah rupa format tina video (jeung audio) kana séjén video (jeung audio) format. Nalika urang diusahakeun eta kalawan abdi video test 3 detik, urang teu bisa meunang eta pikeun berpungsi dina Mac abdi. Tapi anjeun bisa jadi kudu hadé tuah. situs ieu manfaat keur gratis.
Sababaraha parabot lianna kami kapanggih di antarana:
- Miro Video Parabot Parobah (Windows Macintosh) - program ieu manfaat tina jalan ngarobah kana duanana Ogg na mp4 (H.264) jeung éta kabuka sumber.
- Koyote Video Parabot Parobah (Windows)
- Bébas Video Parabot Parobah Urang pikir ieu boga duanana versi Macintosh Windows na, tapi ieu hésé ngabejaan ti situs maranéhanana
- Basajan Theora Encoder (Macintosh) - ieu teh hiji urang condong make.
Sakali anjeun boga video Anjeun disimpen di format Ogg, simpen eta ka lokasi dina ramatloka anjeun sarta buka kaca hareup pikeun ngarobah ka format sejen pikeun panyungsi lianna.
05 10
Ngarobah éta pidio kana mp4 pikeun Safari
The format salajengna anjeun kudu ngarobah video Anjeun ka nyaeta mp4 (H.264 video) meh bisa dicoo dina Safari 3 jeung 4 jeung iPhone jeung Android. Tambih Deui, video H.264 bisa gampang dirobah jadi flv file pikeun ningali kana Flash.
format ieu leuwih gampang sadia dina produk komérsial, sarta Anjeun meureun geus boga program nu bakal ngarobah kana mp4 lamun boga redaktur video. Upami Anjeun gaduh Adobe premiere anjeun tiasa nganggo Adobe Video Encoder, atawa lamun kudu QuickTime Pro anu bakal dianggo ogé. Loba converters kami dibahas dina kaca saméméhna ogé bakal ngarobah pidio kana mp4.
- Media-Convert - hiji alat online
- Miro Video Parabot Parobah (Windows Macintosh) - program ieu manfaat tina jalan ngarobah kana duanana Ogg na mp4 (H.264) jeung éta kabuka sumber.
- Super (Windows) - bakal ngarobah loba jenis file béda mun mp4 na flv
- Bébas Video Parabot Parobah Urang pikir ieu boga duanana versi Macintosh Windows na, tapi ieu hésé ngabejaan ti situs maranéhanana
Simpen file mp4 anjeun ka ramatloka anjeun lajeng Anjeun gé kudu ngarobah ka flash pikeun Internet Explorer ngagunakeun.
06 10
Ngarobah pidio pikeun flv pikeun Internet Explorer
Cara panggampangna pikeun ngarobah pidio kana flv nyaeta ngagunakeun Flash sorangan. Maksudna kumaha urang ngarobah pidio ka Flash. Tapi lamun teu boga Flash, didieu aya dua parabot populér pikeun ngarobah payil kana flv:
- Super (Windows) - bakal ngarobah loba jenis file béda mun mp4 na flv
- ffmpegX (Macintosh) - bakal ngarobah loba jenis file béda mun mp4 na flv.
Simpen file flv anjeun ka ramatloka anjeun sarta kaca hareup baris némbongkeun Anjeun cara nulis HTML supados anjeun tiasa muter video Anjeun.
07 10
Nambah Unsur Video pikeun Page Web anjeun
Hal ieu kacida gampang ngagunakeun HTML 5 pikeun nambahkeun video ka kaca Wéb. Paling panyungsi modéren ngarojong HTML 5 video, sanajan maranehna teu kabeh ngarojong eta dina cara nu sami. Tapi naon ieu hartina éta lamun ngahemat video Anjeun sakumaha duanana Ogg sarta format mp4, Anjeun bakal tiasa nyerat ngan opat atawa lima garis tina HTML keur meunang ka nembongkeun di paling panyungsi modéren (iwal Internet Explorer 8). Di dieu nu kumaha:
- Nulis HTML 5 doctype kamajuan ambéh panyungsi nyaho kana nyangka HTML 5:
- Jieun kaca Wéb anjeun anjeun normal bakal nyieun eta:
- Jero awak, nempatkeun
- Mutuskeun naon atribut rék video anjeun ka gaduh:
- autoplay - ngamimitian pas ayeuna teh diundeur
- kadali - ngawenangkeun pamiarsa anjeun pikeun ngadalikeun video (jeda, ngamundurkeun, gancang-gancang)
- loop - ngamimitian video ti mimiti nalika eta ends
- preload - pre-ngundeur video supados éta siap gancang nalika nasabah clicks dinya
- poster - nangtukeun gambar nu Anjeun hoyong pake nalika video nu geus dieureunkeun
- Lajeng nambahkeun payil sumber pikeun dua versi ngeunaan video Anjeun (mp4 sarta OGG) di jero
- Buka halaman dina Chrome 1, Firefox 3.5, Opera 10, sarta / atawa Safari 4 sarta pastikeun eta mintonkeun neuleu. Anjeun kudu nguji deui di sahenteuna Firefox 3.5 jeung Safari 4 - sabab tiap ngagunakeun codec béda.
Éta pisan. Sakali anjeun boga kode ieu tempat anjeun gé boga video anu hade dina Firefox 3.5, Safari 4, Opera 10, sarta Chrome 1. Tapi kumaha upami Internet Explorer?
Internet Explorer teu suka HTML 5 atawa
Dina bagian hareup, Ieu gé ngobrol ngeunaan naon bisa Anjeun pigawé pikeun meunang IE 8 maén nicely kalawan HTML 5 tag video anjeun sarta nembongkeun video. Anjeun kudu make Flash. Warta alus nyaeta anu IE 9 diperkirakeun ngarojong HTML 5 sarta tag video.
08 10
Nambah JavaScript jeung Flash Player keur Cokot Internet Explorer jeung Gawé
Anjeun bisa geus noticed yén dina HTML kaca saméméhna urang, aya henteu garis sumber pikeun file flv. Tur upami Anjeun salah dites kaca nu di Internet Explorer dinya moal bakal jalan. Éta alatan Internet Explorer henteu mikawanoh HTML 5 sarta eta moal bisa maén boh OGG atanapi mp4 video natively. Dina raraga neangan Internet Explorer 7 sarta 8 ka tempat gawe, Anjeun kudu gaduh eta maénkeun video salaku Flash. Tapi aya nu leuwih lengkah lalaki ka dianggo ti ngan nambahkeun payel flv.
Hambalan 1: Cokot hiji Player Flash Video pikeun Website anjeun
Urang nganjurkeun lalaki FlowPlayer sabab mangrupa Flash video pamuter open source nu tiasa install dina server Web anjeun sarta make iraha anjeun boga Flash video pikeun muterkeunana. Versi bébas tina FlowPlayer inserts iklan kana video Anjeun, tapi Anjeun ogé bisa meuli lisensi komérsial lamun mikabutuhna.
Turutan parentah dina situs FlowPlayer masang FlowPlayer on ramatloka anjeun. Dina nutshell hiji, anjeun bakal jadi masang 2 SWF file sarta berkas JavaScript dina situs anjeun. Di handap HTML Anjeun, (méméh
Tapi Internet Explorer kénéh moal maén video, Anjeun kudu ngajarkeun deui cara mikawanoh HTML 5 tag.
Hambalan 2: ngayakinkeun Internet Explorer jeung Baca HTML 5 Tags
Aya Aksara gunana dina Code Google disebut "HTML Shiv" anu bakal nulungan IE ngakuan HTML 5 elemen. Ku kituna dina
<-! [Lamun IE]>
Oke, ayeuna IE bakal ngakuan
Hambalan 3: Tambahkeun Line Sumber keur flv File
Kawas maneh tuh dina kaca saméméhna, anjeun bakal nambahan hiji garis ka HTML anjeun 5 jero
CODEC = "On2 VP6, Sorenson narik, layar video, layar video 2, H.264" '>
09 10
Nambah JavaScript jeung Flash Player keur Cokot Internet Explorer jeung Gawé - Part 2
Hanjakal, urang nuju masih teu rengse. Urang kudu ayeuna ngabejaan IE nganggo pamuter video FlowPlayer Flash kami kukituna referenced luhur.
Hambalan 4: Hurungkeun nu
Keur kitu, urang butuh Aksara séjén. Simkuring ngagaduhan naskah ti teuleum ka HTML 5 . Tapi lamun urang diuji deui, éta teu dianggo dugi urang dijieun sababaraha pangaluyuan:
- Sabudeureun garis 31: nambahkeun lokasi instalasi FlowPlayer Anjeun.
- Sabudeureun garis 42: ngarobah tipe file tina
video / mp4
kavideo / x-flv
- Sabudeureun garis 94: dimimitian ku
lamun (!! $ && !! $ (dokumen) .ready) {
nepi ka ahir dokumen teh, ngarobah bagian anu maca:// lamun (!! $ && !! $ (dokumen) .ready) {
/ * Pamaké jQuery tiasa initialize pas nu DOM geus siap * /
// $ (dokumen) .ready (html5_video_init);
//} sejenna {
/ * Sarerea sejenna bisa antosan dugi onload * /
/ * Fungsi addEvent via http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * /
var addEvent = fungsi (obj, tipe, FN) {
lamun (obj.addEventListener)
obj.addEventListener (jenis, FN, palsu);
sejenna lamun (obj.attachEvent)
obj.attachEvent ( 'on' tipe +, fungsi () {balik fn.apply (obj, Array anyar (window.event));});
}
addEvent (jandela, "beban", html5_video_init);
//}
Sakali anjeun geus diédit dina file JavaScript, unggah ka server anjeun, sarta tumbu ka dinya di handap kaca HTML anjeun (méméh ):
Whew! Ayeuna nu geus dipigawe sadayana yen, Anjeun kudu unggah HTML Anjeun jadi Anjeun bisa dimimitian nguji.
10 10
Test di Salaku Loba panyungsi Salaku Anjeun Bisa
Nguji Kaca video nu kritis lamun hayang boga peluncuran suksés. Anjeun kedah pastikeun nguji kaca anjeun dina panyungsi pang populerna jeung versi pikeun ramatloka anjeun.
Simkuring geus kapanggih yén bari éta mungkin migunakeun parabot kawas BrowserLab na AnyBrowser pikeun nguji video, éta moal sakumaha dipercaya salaku bringing nepi kaca dina panyungsi diri. Lamun anjeun ngalakukeun nu bener bisa ningali lamun ayeuna teh bisa dipake atawa henteu.
Kusabab anjeun indit ka sadayana kasulitan pikeun encode video anjeun dina tilu format, Anjeun kudu nguji ka pastikeun eta mintonkeun dina sakabéh tilu. Ieu hartosna, di minimum, Anjeun kedah nguji deui di:
- Firefox 3.5
- Safari 3 atanapi 4
- Internet Explorer 7 atawa 8
Anjeun tiasa nguji dina Chrome, tapi saprak Chrome baris nempo sakabeh tilu padika (malah Flash, lamun boga plugin nu), éta hésé ngabejaan lamun aya masalah jeung salah sahiji dua sejenna atawa anu codec Chrome ieu ngagunakeun.
Pikeun karapihan Anjeun pikiran, Anjeun ogé kudu nguji dina panyungsi heubeul ningali naon maranehna ngalakukeun, utamana lamun loba pembaca Anjeun nganggo panyungsi heubeul.
Meunang ngagawekeun Video Dina heubeul panyungsi
Salaku kalayan sagala kaca Wéb, Anjeun mimitina kudu mertimbangkeun kumaha penting nya eta pikeun meunang jalma panyungsi berpungsi. Lamun 90% konsumén Anjeun nganggo Netscape, mangka anjeun kudu boga rarancang fallback keur maranehna. Tapi lamun kirang ti 1% do, éta moal bisa masalah jadi loba.
Sakali anjeun geus mutuskeun naon panyungsi nu nuju bade nyoba rojongan, cara panggampangna nyaeta mun saukur nyieun hiji halaman séjén pikeun aranjeunna pikeun nempo video dina. Dina eta kaca séjén, anjeun bakal Lebetkeun video nganggo HTML 4. Terus boh nganggo sababaraha bentuk beungeut browser pikeun alihan aranjeunna aya atawa ngan nambahan tumbu ka kaca nu dina salah ieu.