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

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

音頻2HTML5視頻3

使用DOM控制播放4HTML5的Canvas

HTML音頻17.1HTML5音頻<audio>標(biāo)記來完成我們對聲音的調(diào)用及播放?；菊Z法：<audiosrc="ring.wav"controls="controls">Yourbrowserdoesnotsupporttheaudiotag.</audio>語法說明：如果不加“controls”在瀏覽器上不會(huì)顯示播放器?？梢栽陂_始標(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)該屬性，則向用戶顯示控件，比如播放按鈕。looploop如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開始播放。mutedmuted規(guī)定視頻輸出應(yīng)該被靜音。preloadpreload如果出現(xiàn)該屬性，則音頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的音頻的URL。7.1HTML5視頻實(shí)例7-2：音頻標(biāo)記的屬性設(shè)置。

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

HTML5Canvas元素47.4HTML5Canvas元素Canvas就像傳統(tǒng)的銀幕，可寬，可長，就是不能圓，它是一個(gè)矩形，而且只能是一個(gè)矩形，類似于Flash的舞臺(tái)場景。Canvas使用Javascript在Web上繪制各種圖像。Canvas區(qū)域中的每一個(gè)像素都可控，即所謂的像素級操作。Canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。Canvas不需要插件，具有跨平臺(tái)的先天優(yōu)勢，與Flash、SVG和VML等不同。Canvas具有多種操作函數(shù)和方法，比SVG和VML簡單易懂。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,