Web前端技術(shù)開(kāi)發(fā)（HTML5+CSS3+JavaScript）課件 第七單元 多媒體頁(yè)面設(shè)計(jì)

Web前端開(kāi)發(fā)技術(shù)第六單元層與區(qū)塊的頁(yè)面布局學(xué)會(huì)HTML5的audio元素，video元素和canvas元素的使用使用audio播放音頻文件使用video播放視頻文件canvas的使用1HTML5

音頻2HTML5視頻3

使用DOM控制播放4HTML5的Canvas

HTML音頻17.1HTML5音頻<audio>標(biāo)記來(lái)完成我們對(duì)聲音的調(diào)用及播放。基本語(yǔ)法：<audiosrc="ring.wav"controls="controls">Yourbrowserdoesnotsupporttheaudiotag.</audio>語(yǔ)法說(shuō)明：如果不加“controls”在瀏覽器上不會(huì)顯示播放器。可以在開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標(biāo)簽的信息。7.1HTML5音頻實(shí)例7-1：使用<audio>標(biāo)記設(shè)置音頻，必須設(shè)置controls="controls"。7.1HTML5音頻<audio>標(biāo)記的其他屬性如表7-1所示。屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶(hù)顯示控件，比如播放按鈕。looploop如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放。mutedmuted規(guī)定視頻輸出應(yīng)該被靜音。preloadpreload如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的音頻的URL。7.1HTML5視頻實(shí)例7-2：音頻標(biāo)記的屬性設(shè)置。

HTML5視頻27.2HTML5視頻<video>標(biāo)記來(lái)完成對(duì)視頻的調(diào)用及播放?；菊Z(yǔ)法：<videosrc="sea.mp4"controls="controls">Yourbrowserdoesnotsupportthevideotag.</video>語(yǔ)法說(shuō)明：如果不加“controls”在瀏覽器上不會(huì)顯示播放器?？梢栽陂_(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標(biāo)簽的信息。7.2HTML5視頻實(shí)例7-3：使用<video>標(biāo)記設(shè)置視頻，必須設(shè)置controls="controls"。7.2HTML5視頻<video>標(biāo)記的其他屬性如表所示屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶(hù)顯示控件，比如播放按鈕。heightpixels設(shè)置視頻播放器的高度。looploop如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開(kāi)始播放。mutedmuted規(guī)定視頻的音頻輸出應(yīng)該被靜音。posterURL規(guī)定視頻下載時(shí)顯示的圖像，或者在用戶(hù)點(diǎn)擊播放按鈕前顯示的圖像。preloadpreload如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的視頻的URL。widthpixels設(shè)置視頻播放器的寬度。使用DOM控制播放37.3使用DOM控制播放屬性描述currentTime當(dāng)前播放時(shí)長(zhǎng)。volume媒體文件播放音量。方法描述load方法用于重新加載待播放的媒體文件。play方法用于播放媒體文件。pause方法用于暫停播放媒體文件。<video>和<audio>元素的方法、屬性和事件可以使用JavaScript進(jìn)行控制。使用JavaScript來(lái)操作<video>標(biāo)記，對(duì)<video>做一些簡(jiǎn)單基本的操作，包括播放器的播放、暫停，音量的讀取、設(shè)置等相關(guān)操作。在HTML5中<video>和<audio>元素?fù)碛幸恍┓椒ê蛯傩詠?lái)控制播放。如：它們提供了用于播放、暫停以及加載媒體文件的方法等。以及一些公共的屬性（比如時(shí)長(zhǎng)、音量等）可以被讀取或設(shè)置。常用屬性如表所示。7.3使用DOM控制播放實(shí)例7-5：使用DOM控制視頻文件7.3使用DOM控制播放實(shí)例7-6：使用DOM控制音頻文件

HTML5Canvas元素47.4HTML5Canvas元素Canvas就像傳統(tǒng)的銀幕，可寬，可長(zhǎng)，就是不能圓，它是一個(gè)矩形，而且只能是一個(gè)矩形，類(lèi)似于Flash的舞臺(tái)場(chǎng)景。Canvas使用Javascript在Web上繪制各種圖像。Canvas區(qū)域中的每一個(gè)像素都可控，即所謂的像素級(jí)操作。Canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。Canvas不需要插件，具有跨平臺(tái)的先天優(yōu)勢(shì)，與Flash、SVG和VML等不同。Canvas具有多種操作函數(shù)和方法，比SVG和VML簡(jiǎn)單易懂。7.4HTML5Canvas元素屬性描述height設(shè)置canvas的高度，默認(rèn)值是150像素。width設(shè)置canvas的寬度，默認(rèn)值是300像素。fillStyle設(shè)置用于填充一個(gè)區(qū)域的顏色，例如，fillStyle='rgb(255,0,0)'。strokeStyle設(shè)置用于繪制一根直線的顏色，例如，fillStyle='rgb(255,0,