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

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

音頻2HTML5視頻3

使用DOM控制播放4HTML5的Canvas

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

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

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