330 likes | 338 Views
Audio, Video, and More HTML5. Audio and Video for the W eb. Prior to HTML5, there w as no standard w a y to depl o y audio or video in a w ebpage. Users need to install plug-ins to pl a y differe n t media. It w as hard to get media to pl a y correctly on differe n t br o ws ers.
E N D
Audio,Video,andMoreHTML5 (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
AudioandVideofortheWeb • PriortoHTML5,therewasnostandardwaytodeployaudioor videoinawebpage. • Usersneedtoinstallplug-instoplaydifferentmedia. Itwas hardtogetmediatoplaycorrectlyondifferentbrowsers. • HTML5 introducestheelementsaudioandvideoprovidinganeasywaytoplacestandardsoundandvideoinwebpagesthatwillworkonallplatforms. (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
DigitalAudio • Anaudiosignalisnaturallyacontinuouswaveoffrequencyandamplitude. Analogaudiomustbedigitizedtoplaybackonacomputer. • Ananalogaudiosignalisdigitizedbysamplingandquantization. Thecontinuoussoundwaveissampledatregular timeintervals,andthevaluesateachsamplingpointarequantizedtodiscretelevels. Theresultingdataarestoredinbinaryformatasadigitalaudiofile. (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
AudioEncodingFormats Advancesindigitalaudiobringincreasinglysophisticatedcompressionanddecompression(codec)schemestoreduceaudiofilessizewhilepreservingsoundquality. FilenameSuffix,Format Type audio/x-aiff audio/midi audio/mpeg audio/x-realaudio audio/amr audio/ogg audio/x-wav audio/x-wma aif(f),AIFFAIFC mid,MIDI mp3 raorrm,RealAudio amr oggorogaVorbis wav,WAVE wma,WindowsMediaAudio (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
TheaudioElement <audio attributes src="url"></audio> <audio src="files/Bob_sinclar_love_generation.mp3" controls="controls" autoplay="autoplay"></audio> Demo: Ex: Audio Audioformatssupporteddependonthebrowser. But.ogg,.mp3, and.wavarelikelytobesupported. Youcanincludealternative formatswiththesourceelement: <audioattributes > <source src="file.ogg" /> <source src="file.mp3" /> ... </audio> Abrowserwillplaythe1stsupportedformat. (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
PlayingVideo • Avideoisasequenceofimagesdisplayedinrapidsuccessionthatisusuallyalsoplayedinsynchronywithasoundstream. • Forsmoothmotion,aframeratecloseto30fpsisneeded. • DigitalvideoformatsincludeDVD,Blu-ray ,HDTV,DVCPRO/HD,DVCAM/HDCAM,andsoon. • AvideofilefortheWebusuallysuppliesvideotracks,audiotracks,andmetadata. Tracksinavideofilecanalsobeorganizedintochaptersthat • canbeaccessedandplayeddirectly. Suchfilesareknownasvideocontainersandtheyfollowwell-designedcontainerformats,whichgoverntheinternalorganizationofavideofile. TM (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
VideoContainers • MPEG4—Asuiteofstandardaudioandvideocompression formatsfromtheMovingPicturesExpertsGroup(contenttypevideo/mp4;filesuffixmp4,mpg4). • Mobilephonevideo—A3GPP-definedcontainerformatusedforvideoformobilephones(contenttypevideo/3gpp;file suffix3pg). • AVI—AudioVideoInterleavedformatfromMicrosoft(content typevideo/x-msvideo;filesuffixavi). • RealVideo—AnaudioandvideoformatbyRealNetworks. For historicalreasons,itusestheseeminglyincorrectcontenttypeaudio/x-pn-realaudioandthefilesuffixrm. (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
ThevideoElement <video attributes src="url"> </video> <video controls="controls" autoplay="autoplay" src="files/Jai_ho.mp4"></video> Demo: Ex: Video (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
EmbeddedPDF (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
<object style="border: thin solid black" type="application/pdf" data="html5.pdf" width="420" height="300"> <a href="files/ICTExpressPaper.pdf">Paper.pdf</a> </object> Demo: Ex: PDF (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
HTMLTables • Presenttabulardatasuchasanorderreceipt • Organizeentriesinfill-outformsforuserinput (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
TableBasics <table border="1"> <caption>My Contacts</caption> <tbody> <tr><th>Name</th><th>email</th> <th>phone</th></tr> <tr><td>Joe Smith</td><td>jsmith@cnn.com</td> <td>432-555-1000</td></tr> <tr><td>Mary Jane</td><td>mjane@ibm.com</td> <td>123-555-3020</td></tr> </tbody></table> Demo: Ex: SimpleTable (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
ABasicTable and more examples (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
ThetableStructure Atableelementcontainsthefollowingchildelementsinorder: Anoptionalcaption Anoptionalcolgroupforgroupingtogethercolumnsofthe table Anoptionaltheadforgroupingtogetherrowsforthetable header Oneormoretbodyelementscontainingrowsforthetable Anoptionaltfootelementforgroupingtogetherrowsforthe tablefooter (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
CellContentAlignments Demo: Ex: Align (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
SampleShoppingCartTable Demo: Ex: Cart (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
CenteringTables <table style="margin-left: auto; margin-right: auto"> Demo: Ex: CenteredTable (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
TableLayout • style="width: wd"—Setsthewidthoftheelementtowd, whichcanbeafixedlengthorapercentageoftheavailablehorizontalspace. • style="height: • fixedlengthht. ht"—Setstheheightoftheelementtoa Demo: Ex: TableWidth (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
RowandColumnSpans (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
<table style="width: 120px; text-align: center"> <tbody> <tr><td colspan="2" style="background-color:red; height:40px">A</td> <td rowspan="2" style="background-color: cyan">B</td></tr> <tr><td rowspan="2" style="background-color: yellow">C</td> <td style="background-color: green; color: white; height: 40px">D</td></tr> <tr><td colspan="2" style="background-color: blue; color: white; height: 40px">E</td></tr> </tbody></table> Demo: Ex: Spans (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
RulesbetweenCells • Theborder="1"attributeofthetableelementgivesrules separatingallcells. • Foronlyverticalrules,onlyhorizontalrules,orsomeother designforatable,usetheborderstylepropertyonindividualcellstopiecetogetherthedesiredrulesinatable. (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
Table Nesting Demo: Ex:TableNest (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
Table Based Layout Demo: Ex:TableLayout (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
WebpageCharacterEncoding • ASCII,supportedbyregularEnglishkeyboards,containsonly128characters. • HTMLusesUniversalCharacterSet(UCS),orUnicode, definedinISO10646. • UCScontainscharactersfrommostknownlanguagesarrangedintoalinearsequence. Eachcharacterhasacodeposition. ASCIIcharactersareassignedpositions0–127. • AnHTMLdocumentcontainingUCScharacterscanbeencodedindifferentwayswhenstoredasafileortransmittedovertheInternet. • UTF-8isabyte-orientedUnicodetransformationformatthatispopularbecauseofitsASCIIpreservingquality. (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
UTF-8Encoding • UTF-8represents • ASCIIcharacters(codepositions0–127)withthelower7bitsof1byte(single-bytecode) • Codepositions128–2047with2bytes • Codepositions2048–65536with3bytes • UTF-8istherecommendedencodingforwebpages. • <meta charset="utf-8" /> (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
NumericandNamedCharacterReferences • Onacomputer,itishardertoenternon-ASCIIcharactersintoadocument. • Withalternativeinputmethods,andsomelearning,characterfromdifferentlanguagesandUNICODEcharacterscanbe enteredintodocuments. • HTMLNumericandNamedCharacterReferencesprovideacharacter-set-independentwaytouseUNICODEcharacters. • Anumericcharacterreferencespecifiesthecodepositionwith thenotation • &#decimal; or &#xhex; (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
NumericCharacterReferenceDisplay Demo: Ex: Chinese Demo: Ex: Korean (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
CommercialSymbols Demo: Ex: Symbols (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
CharacterAccents Demo: Ex: Accents (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
GreekCharacters Demo: Ex: Greek (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
MetadataandHeadElements • base—forpagelocation • style—forin-pagestylesheet • link—forlinkstorelateddocumentssuchasfaviconsor externalstylesheets • script—forin-pageorexternalscriptssuchasaJavaScriptprogram • meta—forvariouspage-relatedinformationsuchascharacter encoding,keywords,andasummarydescription • <meta name="somename" content="sometext” /> (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
LinkTargets • Thetargetattributecanbeusedinanyelementthatprovidesalinkurl. Ifthetargetisthenameofaniframe,thenthe referenceddocumentisdestinedtothatiframe. Intheparent pageorachildpage,thelink • <a href="index.html" target="f_one">homepage</a> • displaysindex.htmlinaniframenamedf_onewhenclicked. • Withoutanexplicittarget,thedefaulttargetforalinkisthe pageoriframecontainingthelink. Thetargetattributeinthe baseelementcansetthedefaulttargetforalluntargetedlinksinapage. (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea
Pre-definedTargets • Inadditiontonamedframes,therearealsoknowntargets: • _blank—anew,unnamedtop-levelwindow • _self—thesameiframeorpagecontainingthelink,overridinganybase-specifiedtarget • _parent—theimmediateparentoftheiframe • _top—thefull,originalwindow (C) Prof. Paul Wang - CS Kent University, Pravin Pawar - SUNY Korea