多媒體技術(shù)基礎(chǔ)26(HTML5)_第1頁(yè)
多媒體技術(shù)基礎(chǔ)26(HTML5)_第2頁(yè)
多媒體技術(shù)基礎(chǔ)26(HTML5)_第3頁(yè)
多媒體技術(shù)基礎(chǔ)26(HTML5)_第4頁(yè)
多媒體技術(shù)基礎(chǔ)26(HTML5)_第5頁(yè)
已閱讀5頁(yè)，還剩24頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HTML5多媒體技術(shù)基礎(chǔ)2URIT項(xiàng)目申報(bào)Kinect手術(shù)室影像控制Kinect三維建模及3D打印控制學(xué)生信息管理系統(tǒng)網(wǎng)站設(shè)計(jì)3D模型作品設(shè)計(jì)2什么是HTML5？HTML5將成為HTML、XHTML以及HTMLDOM的新標(biāo)準(zhǔn)。HTML的上一個(gè)版本誕生于1999年。自從那以后，Web世界已經(jīng)經(jīng)歷了巨變。HTML5仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些HTML5支持。HTML5是如何起步的？HTML5是W3C與WHATWG合作的結(jié)果。W3C指WorldWideWebConsortium，萬(wàn)維網(wǎng)聯(lián)盟。WHATWG指WebHypertextApplicationTechnologyWorkingGroup。WHATWG致力于web表單和應(yīng)用程序，而W3C專注于XHTML2.0。在2006年，雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的HTML。為HTML5建立的一些規(guī)則：新特性應(yīng)該基于HTML、CSS、DOM以及JavaScript。減少對(duì)外部插件的需求（比如Flash）更優(yōu)秀的錯(cuò)誤處理更多取代腳本的標(biāo)記HTML5應(yīng)該獨(dú)立于設(shè)備開(kāi)發(fā)進(jìn)程應(yīng)對(duì)公眾透明新特性HTML5中的一些有趣的新特性：用于繪畫(huà)的canvas元素用于媒介回放的video和audio元素對(duì)本地離線存儲(chǔ)的更好的支持新的特殊內(nèi)容元素，比如article、footer、header、nav、section新的表單控件，比如calendar、date、time、email、url、search瀏覽器支持最新版本的Safari、Chrome、Firefox以及Opera支持某些HTML5特性。InternetExplorer9支持某些HTML5特性。Web上的視頻直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁(yè)上顯示視頻的標(biāo)準(zhǔn)。今天，大多數(shù)視頻是通過(guò)插件（比如Flash）來(lái)顯示的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過(guò)video元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。視頻格式當(dāng)前，video元素支持三種視頻格式：Ogg=帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件MPEG4=帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件WebM=帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No

如何工作如需在HTML5中顯示視頻，您所有需要的是control屬性供添加播放、暫停和音量控件。包含寬度和高度屬性也可以修改。<video>與</video>之間插入的內(nèi)容是供不支持video元素的瀏覽器顯示的：<videosrc="movie.ogg"controls="controls"></video>

<videosrc="movie.ogg"width=“160"height=“120"controls="controls">Yourbrowserdoesnotsupportthevideotag.</video>

實(shí)例上面的例子使用一個(gè)Ogg文件，適用于Firefox、Opera以及Chrome瀏覽器。要確保適用于Safari瀏覽器，視頻文件必須是MPEG4類型。video元素允許多個(gè)source元素。source元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式：<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video>

<video>標(biāo)簽的屬性屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。heightpixels設(shè)置視頻播放器的高度。looploop如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開(kāi)始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的視頻的URL。widthpixels設(shè)置視頻播放器的寬度。使用DOM進(jìn)行控制HTML5<video>元素同樣擁有方法、屬性和事件。其中的方法用于播放、暫停以及加載等。其中的屬性（比如時(shí)長(zhǎng)、音量等）可以被讀取或設(shè)置。其中的DOM事件能夠通知您，比方說(shuō)，<video>元素開(kāi)始播放、已暫停，已停止，等等。方法、屬性以及事件方法屬性事件play()currentSrcplaypause()currentTimepauseload()videoWidthprogresscanPlayTypevideoHeighterror

durationtimeupdate

endedended

errorabort

pausedempty

mutedemptied

seekingwaiting

volumeloadedmetadata

height

width

在所有屬性中，只有videoWidth和videoHeight屬性是立即可用的。在視頻的元數(shù)據(jù)已加載后，其他屬性才可用。Web上的音頻直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁(yè)上播放音頻的標(biāo)準(zhǔn)。今天，大多數(shù)音頻是通過(guò)插件（比如Flash）來(lái)播放的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過(guò)audio元素來(lái)包含音頻的標(biāo)準(zhǔn)方法。audio元素能夠播放聲音文件或者音頻流。音頻格式當(dāng)前，audio元素支持三種音頻格式：

IE9Firefox3.5Opera10.5Chrome3.0Safari3.0OggVorbis

√√√

MP3√

√√Wav

√√

√如何工作如需在HTML5中播放音頻，所有需要的是：control屬性供添加播放、暫停和音量控件。<audio>與</audio>之間插入的內(nèi)容是供不支持audio元素的瀏覽器顯示的：<audiosrc="song.ogg"controls="controls"></audio>

實(shí)例上面的例子使用一個(gè)Ogg文件，適用于Firefox、Opera以及Chrome瀏覽器。要確保適用于Safari瀏覽器，音頻文件必須是MP3或Wav類型。audio元素允許多個(gè)source元素。source元素可以鏈接不同的音頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式：<audiosrc="song.ogg"controls="controls">Yourbrowserdoesnotsupporttheaudiotag.</audio>

<audiocontrols="controls"><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg">Yourbrowserdoesnotsupporttheaudiotag.</audio>

<audio>標(biāo)簽的屬性屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。looploop如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的音頻的URL。拖放拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。在HTML5中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。<!DOCTYPEHTML><html><head><scripttype="text/javascript">functionallowDrop(ev){ev.preventDefault();}functiondrag(ev){ev.dataTransfer.setData("Text",ev.target.id);}functiondrop(ev){ev.preventDefault();vardata=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body><divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div><imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/></body></html>

拖放設(shè)置元素為可拖放首先，為了使元素可拖動(dòng)，把draggable屬性設(shè)置為true：拖動(dòng)什么-ondragstart和setData()然后，規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么。在上面的例子中，ondragstart屬性調(diào)用了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)。dataTransfer.setData()方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：在這個(gè)例子中，數(shù)據(jù)類型是"Text"，值是可拖動(dòng)元素的id("drag1")。<imgdraggable="true"/>

functiondrag(ev){ev.dataTransfer.setData("Text",ev.target.id);}

拖放放到何處-ondragoverondragover事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。這要通過(guò)調(diào)用ondragover事件的

event.preventDefault()方法：進(jìn)行放置-ondrop當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生drop事件。在上面的例子中，ondrop屬性調(diào)用了一個(gè)函數(shù)，drop(event)：event.preventDefault()

functiondrop(ev){ev.preventDefault();vardata=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}

HTML5Canvas什么是Canvas？HTML5的canvas元素使用JavaScript在網(wǎng)頁(yè)上繪制圖像。畫(huà)布是一個(gè)矩形區(qū)域，可以控制其每一像素。canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。創(chuàng)建Canvas元素向HTML5頁(yè)面添加canvas元素。規(guī)定元素的id、寬度和高度：<canvasid="myCanvas"width="200"height="100"></canvas>

HTML5Canvas通過(guò)JavaScript來(lái)繪制canvas元素本身是沒(méi)有繪圖能力的。所有的繪制工作必須在JavaScript內(nèi)部完成：JavaScript使用id來(lái)尋找canvas元素：然后，創(chuàng)建context對(duì)象：getContext("2d")對(duì)象是內(nèi)建的HTML5對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。下面的兩行代碼繪制一個(gè)紅色的矩形：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>

varc=document.getElementById("myCanvas");

varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);HTML5Canvas理解坐標(biāo)上面的fillRect方法擁有參數(shù)(0,0,150,75)。意思是：在畫(huà)布上繪制150x75的矩形，從左上角開(kāi)始(0,0)。如下圖所示，畫(huà)布的X和Y坐標(biāo)用于在畫(huà)布上對(duì)繪畫(huà)進(jìn)行定位。HTML5內(nèi)聯(lián)SVG什么是SVG？SVG指可伸縮矢量圖形(ScalableVectorGraphics)SVG用于定義用于網(wǎng)絡(luò)的基于矢量的圖形SVG使用XML格式定義圖形SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失SVG是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)SVG的優(yōu)勢(shì)與其他圖像格式相比（比如JPEG和GIF），使用SVG的優(yōu)勢(shì)在于：SVG圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改SVG圖像可被搜索、索引、腳本化或壓縮SVG是可伸縮的SVG圖像可在任何的分辨率下被高質(zhì)量地打印SVG可在圖像質(zhì)量不下降的情況下被放大把SVG直接嵌入HTML頁(yè)面在HTML5中，能夠?qū)VG元素直接嵌入HTML頁(yè)面中：<!DOCTYPEhtml><html><body><svgxmlns="/2000/svg"v

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論