Sa una sa kanyang mga blog para sa PC Pro , web developer Ian Devlin ipinapakita kung paano i-embed ang video sa iyong website gamit ang HTML5
kung paano magdagdag ng mga font upang salitang mac
Marahil ang pinakamalaki at pinaguusapang tampok ng HTML5 ay naka-embed na video. Sa kasalukuyan, ang tanging paraan ng pagdaragdag ng nilalaman ng video sa iyong website ay ang isang third-party na plugin tulad ng Flash, QuickTime o RealPlayer. Sa pagsisimula ng HTML5 at ng elemento ng video ay magbabago ang lahat, sa pamamahala ng video na hinahawakan ng web browser, na inaalis ang pangangailangan para sa anumang suporta ng third party.
Maraming mga web browser ang nag-aalok ng suporta para sa HTML5. Dito ay ilalantad namin kung paano mo mai-embed ang video na walang plugin sa iyong site at ang mga isyung kakaharapin mo.
Mga uri ng file at pagiging tugma ng browser
Upang magsimula, sandali naming titingnan ang iba't ibang mga uri ng file ng video na sinusuportahan sa HTML5. Ito ang Theora OGG at H.264 (.mp4). Sinusuportahan ng iba't ibang mga browser ang iba't ibang mga uri, at ang ilan ay wala sa lahat. Ipinapahiwatig ito ng sumusunod na talahanayan:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Mga codec at iba pang mga teknikal na isyu
Ang HTML5 mismo ay hindi tumutukoy ng isang video codec na gagamitin, at humantong ito sa mga argumento kung alin ito ang pinakamahusay na magagamit para sa web . Kaya upang masakop ang lahat ng mga browser, kailangan naming suportahan ang parehong mga codec.
At pagkatapos syempre mayroong Internet Explorer. Sa ngayon, wala sa mga inilabas na bersyon ng Internet Explorer ang sumusuporta sa elemento ng video at kinakailangan pa rin ang isang plugin upang makapaglaro ng video. Magbabago ito sa paglabas ng Internet Explorer 9 (malamang maaga sa susunod na taon), kung susuportahan ang H.264, kasama ang maraming iba pang mga good HTML5.
Kung sakaling nagtataka ka kung paano, maaari mong mai-convert ang iyong mga file ng video sa OGG (maaari kang magbasa nang higit pa tungkol sa uri ng Theora OGG sa TheoraCookbook ) mga file gamit ang Miro Video Converter .
Para sa karagdagang malalim na impormasyon sa elemento ng video at mga codec, magtungo sa sumisid sa html5: video sa web ni Mark Pilgrim.
HTML5 code
Ngayon ay lumilipat kami sa aktwal na HTML5 code at kung paano namin maaaayos ang bagay. Nagbibigay sa amin ang HTML5 ng dalawang bagong elemento na maaari naming magamit upang magdagdag ng video sa aming mga web page: ang elemento, na nabanggit na namin, at ang elemento. Tingnan natin ang bawat isa sa kanya.
Ang elemento
Ang elemento ng video ay maaaring magkaroon ng mga sumusunod na katangian:
| Katangian | Paglalarawan |
|---|---|
| src | isang wastong URL sa mismong file ng video |
| auto-play | isang boolean na nagpapahiwatig kung dapat awtomatikong i-play ang video |
| mga kontrol | isang boolean na nagpapahiwatig na ang mga default na kontrol ng media ay dapat ipakita ng browser |
| loop | isang boolean na nagpapahiwatig kung dapat i-play ang video nang paulit-ulit |
| preload | ipinapahiwatig sa browser kung kinakailangan ng pre-emptive na pag-download ng video mismo, o kung ang metadata lamang ang kailangan. Ang mga posibleng halaga ay:
|
| poster | ang URL sa isang file ng imahe upang maipakita kapag walang magagamit na data ng video |
| lapad | ang lapad ng video, sa mga CSS pixel |
| taas | ang taas ng video, sa CSS pixel |
Mula dito, makikita kung gaano kadali mag-embed ng isang OGG video sa iyong website gamit ang elemento ng video na nag-iisa:
Iyon lang talaga ang mayroon dito.
Anumang browser na sumusuporta sa format ng Theora OGG ay dapat na matagumpay na maipakita at i-play ang iyong video nang walang karagdagang pagtatalo. Siyempre hindi ito ganoon kadali, dahil tulad ng nakita natin mula sa talahanayan sa itaas, gagana lamang ang code sa Firefox, Chrome at Opera. Kaya kailangan nating magkaroon din ng isang fallback sa H.264 din. Maaari itong makamit gamit ang elemento, na nagbibigay-daan sa amin upang tukuyin ang maraming mga mapagkukunan ng media para sa elemento ng video.
gaano katagal ng isang video ang maaari mong mai-post sa instagram
Ang elemento
Ang sumusunod na elemento ay may mga sumusunod na katangian:
| Katangian | Paglalarawan |
|---|---|
| src | isang wastong URL sa media (sa kasong ito ng video) na file mismo |
| uri | ang uri ng file ng media na dapat ay isang MIME type , hal. type='video/ogg' ipinapahiwatig na ito ay isang Theora OGG video, at maaari mo ring ibigay ang MIME codec upang matulungan ang browser na magpasya kung paano i-play ang video sa pamamagitan ng paggamit type='video/ogg; codecs='theora, vorbis'. |
| kalahati | nagbibigay ng inilaan na uri ng media ng mapagkukunan ng media at dapat maging wasto media query , hal. media='handheld' ipinapahiwatig na ang video ay angkop para sa mga handheld device o media='all and (min-device-height:720px)' na nagpapahiwatig na ang video ay naaangkop para sa mga screen ng 720 pixel o higit pa. |
Tandaan: na ang elemento ng mapagkukunan ay walang bisa at may panimulang tag ngunit walang pansarang tag
Ang pinaka-kapaki-pakinabang na bagay tungkol sa pinagmulang elemento ay magagamit namin ito upang i-stack ang iba't ibang mga uri ng file, na pinapayagan ang browser na subukan ang bawat isa hanggang sa makahanap ito ng isa na maaari nitong i-play.
Gamit at magkasama
Upang mai-stack ang mga video sa iba't ibang uri sa loob ng elemento ng video, inilalagay namin ang code tulad ng sumusunod:
Your browser does not support the video element.
Gagana ang code sa itaas sa lahat ng mga browser maliban sa Internet Explorer, na ipapakita ang mensahe na ipinahiwatig sa itaas.
Maaari mo itong subukan sa iyong sarili sa pamamagitan ng pagtingin sa pahina ng Video ng Pagsubok ng HTML5, na naglalaman ng isang sample na video ng isang paru-paro sa parehong format na Theora OGG at MP4, kaya't kung tinitingnan mo ito sa Firefox, Chrome, Safari, Opera o sa iPhone o sa isang iPhone Android handset, dapat mo itong tingnan.
Ang matalim na mga kutsilyo sa gitna mo ay napansin na maaari naming samantalahin ang stacking na ito at magkaroon ng isang fallback sa Flash (o ilang iba pang plugin) sa ibaba sa halip na magpakita ng isang paumanhin hindi mo makita ang mensaheng video na ito, sa pamamagitan ng paggamit ng sumusunod na code :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Konklusyon
Tulad ng karamihan sa mga elemento ng HTML5, ang suporta sa browser para sa mapagkukunan at mga elemento ng video ay kasalukuyang nakakabit. Mayroon ding isang malaking debate na nangyayari sa ngayon kung papatayin ng pinagmulang elemento ang paggamit ng Flash bilang pinakatanyag na pamamaraan ng pagdaragdag ng nilalaman ng video sa mga website. Hindi ako sigurado na papatayin nito ang Flash nang buo, ngunit gayunpaman sa palagay ko makatarungang sabihin na narito upang manatili at magbibigay sa mga developer ng web ng isang mas malinis, mas madaling diskarte sa pag-embed ng video.
