Tải bản đầy đủ - 0 (trang)
Video, Audio, and Other Multimedia

Video, Audio, and Other Multimedia

Tải bản đầy đủ - 0trang

Aswithanysetofstandards,thereareissueswithHTML5’snativemultimedia.Despiteeffortsbymany

tostandardizeononefileformatforaudioandoneforvideo,notallbrowsersandrelatedvendors

wantedtobetoldwhattodo.Thismeansthatyouneedtoprovideyourmediainmorethanoneformatfor

ittobeplayablebyHTML5-capablebrowsers.We’lllookatthisindetaillater.

TheusefulnessofHTML5andnativemediawasenhancedwhenAppleannouncedthattheywerenot

goingtosupportFlashontheirmobiledevices,includingtheiPhoneandiPad.Thisshowedthatthepast

near-universalrelianceonFlashforplayingmediafileswasdiminishingandthatthedayforHTML5’s

nativemultimediawasathand.ThisiswhereHTML5nativemultimediasteppedinandshowedits

strength,becausethebrowseronApple’smobiledevicesdoesindeedsupportHTML5.Othermobile

deviceshavefollowedsuit.

DigitalRightsManagement(DRM)

Onethingyou’llnoticeaboutembeddingaudioandvideofilesisthattheURLstothe

sourcefilesareavailableforanyonewhowantstodownloadand“steal”yourcontent—

justasembeddedimagesandHTML,JavaScript,andCSSsourcefilesare.There’s

nothingyoucandoaboutthis.

HTML5doesn’tprovideanymethodtoprotectyourmediacontentinanyway,although

therearediscussionsunderwaythatmightchangethis.Soifyouareconcernedabout

protectingyourmediafiles,fornowdon’tuseHTML5nativemultimedia.

What’saCodec?

Acodecisacomputerprogramthatusesacompressionalgorithmtoencodeanddecodea

digitalstreamofdata,makingitmoresuitableforplayback.

Theobjectiveofthecodecisusuallytomaintainthehighestaudioandvideoqualityitcan

whileaimingforasmallerfilesize.

Ofcourse,somecodecsarebetterthanothersatperformingthis.

SettingtheMIMEType

SomebrowsersmaynotplayyourmediafilesunlesstheyareservedastheproperMIME

type.IfyoursiteisrunningontheApachewebserver—anditprobablyis—youcan

configuretheMIMEtypesinwhatisknownasthe.htaccessfile.It’satextfilethat

typicallyresidesintherootdirectoryofyoursite,alongsideyourHomepage.

HerearetheMIMEtypestoaddtoyour.htaccessfilewithanytexteditor:

AddTypevideo/ogg.ogv

AddTypevideo/mp4.mp4

AddTypevideo/webm.webm

AddTypeaudio/ogg.ogg

AddTypeaudio/mp3.mp3



Ifyoursitealreadyhasthefile,renameita.htaccess,downloaditfromyourweb

server,addtheMIMEtypesabove,uploadittoyourserver,andrenameitbackto

.htaccess.Ifyoursitedoesn’thaveit,youcancreateitfromscratch.

Askyourwebhostaboutupdatingyour.htaccessfileifyouneedhelp.



VideoFileFormats

Threedifferentvideofileformats,orcodecs,aresupportedbyHTML5:

OggTheorauseseitherthe.oggor.ogvfileextensionandissupportedbyFirefox3.5+,Chrome4+,

Opera10.5+,andFirefoxforAndroid.

MP4(H.264)usesthe.mp4or.m4vfileextensionandissupportedbySafari3.2+,Chrome4-?(see

tips),InternetExplorer9+,iOS(MobileSafari),Android2.1+,ChromeforAndroid,Firefoxfor

Android,andOperaMobile11+.

WebMusesthe.webmfileextensionandissupportedbyFirefox4+,Chrome6+,Opera10.6+,

Android2.3+,ChromeforAndroid,FirefoxforAndroid,andOperaMobile14.

Tip

Youneedtoprovideyourvideoinatleasttwodifferentformats—MP4andWebM—to

ensurethatallHTML5-compatiblebrowsersaresupported.

Tip

GooglehassaidtheywilldropsupportforMP4inChrome,buthaven’tyet.Firefoxis

rollingoutMP4supportgradually.Ondesktops,Windows7+isgettingitfirst,althoughit

requiresuserstohavethecodecinstalledontheirmachine.

Tip

WebMwillworkinIE9+orSafariifavisitorhasWebMinstalledontheirmachine.

ConvertingBetweenFileFormats

Ifyoualreadyhaveavideoresourceandwishtoconvertittoanyorallofthefileformats

listed,thereareanumberoffreetoolsthatcanhelpyouwiththis.Herearetwo:

MiroVideoConverter,atwww.mirovideoconverter.com

HandBrake,athttp://handbrake.fr



AddingaVideotoYourWebpage

Inordertoaddavideotoyourwebpage,youneedtousethevideoelement.Doingsocouldn’tbe

simpler .Browserswillfigureoutyourvideo’sdimensionswhenitloadsthefileanddisplayitatthat

size ,oryoucansetthemyourself .

Clickheretoviewcodeimage

...











SpecifyingasingleWebMvideowithnocontrols.



Videopausesonthefirstframebydefault.Younowhaveavideowithoutaplaybutton,meaning

visitorscan’twatchit!We’llcorrectthatinthenextsection.

Clickheretoviewcodeimage

...











ThedimensionsIsetherematchthevideo’snormalsize,sothiswouldlookthesameas .But,as

withimages,youcanusewidthandheightvaluesthatareadifferentsize,andthebrowserwillscale

thevideothebestitcan.

Thevideoisn’tdisplayedifthebrowserdoesn’tunderstandthevideoformatyouspecified



.



Browsers,likeSafari,thatdon’tsupportWebMdisplayawholelottanothin’.Notgood!Later,I’ll

showyouhowtospecifymorethanonevideoformatsoallbrowsersarehappy.



Toaddasinglevideotoyourwebpage

1.Obtainyourvideoresource.

2.Type,wheremy-video.extisthelocation,

name,andextensionofthevideofile.

Andthat’sit!Well,almost( and ).

Exploringvideoattributes

Whatotherattributes,besidessrc,canyouusewiththevideoelement?AsyoucanseeinTable17.1,

therearequiteanumberofthem,whichgivesyoualotofflexibilitywithyourvideo.



TABLE17.1VideoAttributes



AddingControlsandAutoplaytoYourVideo

Sofar,I’veshownyouthesimplestpossiblemethodforaddingvideotoyourwebpage.Thevideointhat

examplewillnotevenstartplaying,becausewehaven’ttolditto.Furthermore,yourvisitorscan’tstart

thevideothemselvesbecausetheplayerdoesn’tdisplayanycontrols.

Youcanchangethateasilyenough .Thecontrolsattributetellsthebrowsertoaddasetofdefault

controlstothevideo.Eachbrowserhasitsownsetofdefaultcontrols,whichlookverydifferentfrom

eachother( through ).

Clickheretoviewcodeimage

...











AddingasingleWebMvideofile,thistimewithcontrols.



ThevideocontrolsinFirefox.YouseeherethatthevideoisasecondlongerinFirefoxthaninthe

otherbrowsers.



ThevideocontrolsinChrome



ThevideocontrolsinInternetExplorer10



ThevideocontrolsinOpera



ThevideocontrolsinSafari

Normally,avideodoesn’tplayunlessthevisitorusestheplaybutton.Youmaysetittoplayautomatically

byincludingtheautoplayattribute .

Clickheretoviewcodeimage

...











NowthevideoelementincludesthreeattributesfromTable17.1.Thankstoautoplay,thisvideo

willplayautomatically.Withcontrolssetaswell,visitorswillhaveapausebuttontheycanuseat

anytime.Theattributesmayappearinanyorder.

WhenaVideoFormatIsn’tSupported

Ifthebrowseryouusetoviewthecodesamples( and )doesn’tsupportthevideofile

formatyou’reusing,itwillshowitscontrolsbarandeitheranempty,whiterectangle(in

mostcases)ortheposterimage,ifoneisindicatedviatheposterattribute.

Forexample,InternetExplorerandSafaridonotsupportWebMbutdosupportMP4.To

showyoutheircontrolsin and ,respectively,Iskippedaheadandcreatedaseparate

webpagethatusesboththeMP4andWebMformats.You’lllearnhowtodothisin“Using

VideowithMultipleSourcesandaTextFallback.”

Theemptyrectangleisgenerally300x150ifvideodimensionshaven’tbeenspecifiedwith

widthandheight.IfyouincludecontrolsbutuseaformatIE10doesn’tsupport,it

willdisplayablackemptyrectangleand“InvalidSource.”

Toaddcontrolstoavideo

Type,wheremy-video.extpointsto

yourvideofile.

Toaddautoplaytoavideo

Type,wheremyvideo.extpointstoyourvideofile.



BooleanAttributes

AsyoumightrecallfromChapter1,Booleanattributes,suchascontrolsand

autoplay,don’tneedtohaveavaluespecifiedforthem(it’soptional).Eitherway,their

presenceonavideooraudioelementyieldsthesameresult.

Theexamplesinthischapterdon’tspecifyvaluesfortheseBooleanattributes,but

couldalsobewrittenas


autoplay="autoplay">.



LoopingaVideoandSpecifyingaPosterImage

Inadditiontosettingyourvideotoplayautomatically,youcansetittoplaycontinuouslyuntilstopped .

(Thisisn’trecommended,though—thinkofyourpoorusers!)Yousimplyusetheautoplayandloop

attributes.

Clickheretoviewcodeimage

...











AsingleWebMvideosettoplayautomaticallyandthenloop.Withnocontrolsincludedhere,your

visitorswon’tbeabletostopthevideo!So,ifyouincludealoop,it’sbesttoincludecontrols.Even

so,anauto-playingvideothatloopsmightdrivevisitorsbatty.

Ifyoudon’tincludeautoplay,normallythebrowserwilldisplaythefirstframeofthevideoinstill

modeonceithasloaded.Youmaywanttochangethisandspecifyyourownimage,whichyoucandovia

aposterimage( and ).

Clickheretoviewcodeimage

...











AsingleWebMvideowithcontrolsandaspecifiedposterimagethatwilldisplaywhenthepageloads

anddisplaysthevideo.



Avideodisplayingaposterimage(untilavisitorplaysthevideo).Inthiscase,theimageisa

screenshottakenfromwithinthevideoitself.

Toaddautoplayandloopavideo

Type,wheremy-video.ext

pointstoyourvideofile.

Tospecifyaposterimageforavideo

Type,

wheremy-video.extpointstoyourvideofileandmy-poster.jpgpointstotheimagethatyou

wanttouseastheposterimage.



PreventingaVideofromPreloading

Ifyouthinkitunlikelythatauserwillviewyourvideo(forexample,it’snotthemaincontentonyour

page),youcanaskthebrowsertonotbotherpreloadingit .Thissavesonbandwidthsoisparticularly

goodforvisitorsonmobiledevices.

Clickheretoviewcodeimage

...











AsingleWebMvideothatwon’tloadwhenthepagefullyloads.Itbeginstoloadwhentheuser

attemptstoplayit.NotethatIomittedthewidthandheightattributes.

Browsersvaryinthewaytheydisplayavideosettopreload="none"beforeplaybackisinitiated(

and ).



AvideowithpreloadsettononeinFirefox.Itdisplaysagenericboxabovethecontrolsbecause

ithasnoinformationaboutthevideo(noteventhedimensions)andnoposterimagewasspecified.When

youplaythevideo,thebrowserobtainsitsdimensionsandresizesthevideoaccordingly.



Chrome(top)displaysanemptyrectangleabovethecontrols.Thatversionoftheplayermaybe

narrowerthanwhatappearswhenavisitorplaysthevideo(bottom).

Toinstructthebrowsertonotpreloadavideo

Type,wheremyvideo.extpointstoyourvideofile.



Tip

Includeaposterimagewiththeposterattributeifyouwanttosetpreload="none"

butdon’twantablankspacetodisplay.

Tip

Ifyoudon’twanttoshowaposterbutdowanttheemptyrectangletomatchthevideo’s

size,includethewidthandheightattributesonthevideoelement,settingtheir

valuestothevideo’sdimensions.Thiswillpreventthejarringeffectofthevideoresizing

whenplaybegins( and ).



OtherpreloadSettings

Thedefaultvalueofpreloadisauto.Thissuggeststothebrowserto“getarunning

start”indownloadingthevideoinanticipationoftheuserchoosingtowatchit.Browsers

willpreloadmuchorevenallofthevideo.Asaresult,thevideoshouldbelessproneto

potentialstopsandstartsduringplaybackwhilethebrowsertriestodownloadmorefor

thevisitortowatch.

Ahappymediumbetweennoneandautoispreload="metadata".Thisasksthe

browsertoretrievebasicinformationaboutthevideo,suchasitsdimensions,duration,

andpossiblyafewframesofvideo.Browserswon’tdisplayanemptyrectangleandwill

sizethevideoproperlybeforeplaybackbegins.

Themetadatasettingalsohintstobrowsersthattheuser’sconnectionislimitedsoit

shouldmakeeveryefforttoconservebandwidthwithoutinterruptingplayback.



UsingVideowithMultipleSourcesandaTextFallback

Thisisallgreat,butalltheprecedingexamplesuseonlyonevideofileandthereforeoneformat.You’ve

alreadyseenthattosupportallHTML5-capablebrowsers,youneedtosupplyvideoinatleasttwo

differentformats:MP4andWebM.

Sohowdoyoudothat?Thesourceelementallowsyoutodefinemorethanonesourceforamedia

element,inthiscasevideo.

Anynumberofsourceelementscanbecontainedwithinavideoelement,sodefiningtwodifferent

formatsforourvideoexampleiseasy .Browserswillloadthefirstfileformatreferencedina

sourceelementthattheysupportandignoretherest( and ).BrowsersthatcannotplayHTML5

videowilldisplaythefallbacklink oramessageyouprovide .

Clickheretoviewcodeimage



...









Downloadthevideo











Twosourcesaredefinedhereforthevideo:anMP4fileandaWebMfile.(Notethatthevideostart

tagdoesnothaveasrcattributelikeitdidinearlierexampleswhenspecifyingasinglevideosource.)

Onlyolderbrowserswilldisplaythelinkedtextcontainedwithinthepelement .Makesureyour

fallbacklinkortextisinsidethevideoelement,otherwiseallbrowserswillshowit.



BrowserslikeIE10thatsupportMP4willloadpaddle-steamer.mp4.



Browsersthatdon’tsupportMP4butdosupportWebMwillloadpaddle-steamer.webm.



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Video, Audio, and Other Multimedia

Tải bản đầy đủ ngay(0 tr)

×