第10章網(wǎng)頁多媒體實現(xiàn)朱金華教學目標熟練掌握video和audio元素的使用方法掌握CSS變換、過渡和動畫的制作方法了解canvas繪圖和HTML拖放的使用方法10.1HTML多媒體元素HTML5支持的音頻和視頻文件格式主要有MP3、MPEG-4、Wav、Ogg和WebM。大家熟悉的MP3音視和MP4視頻（H.264）格式都得到了最新版的各大瀏覽器的全面支持。如果你的瀏覽器播放不了，有可能是版本太低，或者文件格式不正確，比如擴展名為MP4但不符合H.264規(guī)范也是不行的，可以通過各種轉(zhuǎn)換工具（如格式工廠等）轉(zhuǎn)成該標準格式即可。如果使用蘋果公司的safari瀏覽器，這些文件的存放路徑不能有中文。10.1.1多媒體元素基本屬性在HTML5中播放視頻與音頻文件十分簡單，只需添加video或audio元素，并簡單設置元素的一些基本屬性，就可以在頁面中播放多媒體文件。1.元素格式Video元素用于視頻文件的播放，audio元素用于音頻文件的播放。在兩個多媒體元素的開始標記與結(jié)束標記間放置文本內(nèi)容，可以在不支持該元素的瀏覽器中使用，即如果瀏覽器不支持這兩個多媒體元素，那么將顯示開始與結(jié)果標記之間的文本內(nèi)容。在頁面中，創(chuàng)建兩個多媒體元素<video>與<audio>并在元素的“src”屬性中，設置各自播放的視頻與音頻文件，頁面加載完成后根據(jù)controls的設置來播放兩個文件。Chrome、Safari等瀏覽器的最新版已經(jīng)禁用了頁面加載后的自動播放功能，所以要慎用autoplay屬性。注意，在<audio>音頻元素中，為了能正常播放音頻文件，必須將“controls”屬性設置為“true”，表示顯示音頻元素自帶的控制條工具。2.controls屬性為多媒體元素添加了controls屬性，<video>視頻元素的controls屬性，將在視頻元素的底部展示一個元素自帶的控制條工具。雖然由于瀏覽器不同，控制條工具的樣式會有些變化，但所有控制條都有一個播放/暫?？丶?、一個進度條和音量開關，這些特征是不變的。只有當用戶將鼠標懸?；騎ab鍵聚焦至播放的視頻上時，所設置的控制條工具才能顯示出來；一旦從視頻上移開，控制條工具又隱藏起來。在<audio>元素的controls屬性如果沒有設置，頁面中將不會顯示任何效果，但該元素卻存在于DOM中，通過JavaScript代碼可以訪問相關的元素。3.poster屬性在HTML5的<video>元素中，poster屬性表示所選圖片URL，如果添加該屬性，將在視頻文件播放前顯示該圖片，而不是默認顯示視頻文件的第一幀，還可以避免在播放的視頻文件不可用時，出現(xiàn)一片空白區(qū)域，影響用戶體驗。4.其它屬性（1）width與height屬性（2）networkState屬性（3）error屬性（4）readyState屬性（5）currentTime、startTime、duration屬性（6）palyed、paused、ended屬性（7）preload、autoplay、loop屬性（8）defaultPlaybackRate、playbackRate屬性（9）volume、muted屬性10.1.2多媒體元素常用方法多媒體元素可以通過添加controls屬性顯示控制條工具欄，單擊工具欄中的按鈕控制媒體文件的播放過程。除此之外，也可以自定義播放按鈕，調(diào)用多媒體元素在播放文件時的方法，實現(xiàn)控制文件播放過程的功能。1.媒體播放時的方法當一個媒體文件需要通過多媒體元素播放時，可以調(diào)用元素load方法進行文件的加載。Load方法用于加載媒體文件，且自動將元素的playbackRate屬性值設置為defaultPlaybackRate屬性對應的值；同時，將元素的error屬性值設置為“null”值。如果播放加載完成的媒體文件，還需要調(diào)用多媒體元素的play方法，同時將元素的paused屬性設置為“false”值。如果暫停正在播放中的媒體文件，還需要調(diào)用元素的pause方法，即將元素的paused屬性設置為“true”值。2.canPlayType方法由于瀏覽器對多媒體元素加載媒體文件的類型支持不同，因此，在使用多媒體元素加載文件前，需要檢測當前瀏覽器是否支持媒體文件類型。檢測的方法是通過調(diào)用多媒體元素的canPlayType(type)方法，其中type參數(shù)表示需要瀏覽器檢測的類型，該類型與媒體文件的MIME類型一致；通過多媒體元素的canPlayType(type)方法，可以返回如下三個值：空字符：表示瀏覽器不支持該類型的媒體文件。maybe：表示瀏覽器可能支持該類型的媒體文件。Probably：表示瀏覽器支持該類型的媒體文件。10.1.3多媒體元素重要事件多媒體元素不僅有相關的屬性、方法，而且該元素還有一系列完備的事件機制。在第一節(jié)介紹多媒體元素的networkState與error屬性時，分別觸發(fā)了progress與error事件。除此之外，還有很多記錄媒體文件播放過程的事件，如playing等。1.媒體播放事件在媒體文件被瀏覽請求加載、開始加載、開始播放、暫停播放、播放結(jié)束這一系列的流程中所觸發(fā)的事件，稱為“媒體播放事件”，也是多媒體元素的核心事件。通過對這些事件的跟蹤，可以很方便的獲取媒體文件在各個階段的播放狀態(tài)。2.timeupdate事件在多媒體元素的timeupdate事件可以實現(xiàn)媒體文件播放過程中，如果播放位置發(fā)生變化，就會觸發(fā)該事件。利用該事件，結(jié)合多媒體元素的currentTime與duration屬性，可以動態(tài)顯示媒體文件播放的當前時間與總量時間。3.其它事件10.1.4Flash動畫與視頻能在網(wǎng)頁中使用的Flash文件格式有“.flv”和“.swf”兩種10.2CSS動畫設計CSS擅長呈現(xiàn)靜態(tài)樣式，網(wǎng)頁設計師也習慣把它作為頁面效果的設計工具，而CSS3不僅可以實現(xiàn)圓角和邊框圖像，還可以實現(xiàn)2D和3D動畫功能，包括變換（Transform）、過渡（Transition）和動畫（Animation）技術。10.2.1CSS變換CSS3新增的transform屬性可以實現(xiàn)元素的旋轉(zhuǎn)、縮放和翻轉(zhuǎn)、移動、傾斜和矩陣變形等變換效果。1.變換基礎——transform屬性transform實現(xiàn)了一些需用SVG（ScalableVectorGraphics，可縮放矢量圖形）實現(xiàn)的變形功能。它可用于內(nèi)聯(lián)（inline）元素和塊級（block）元素，該屬性可以旋轉(zhuǎn)、縮放和移動元素。熟練使用transform屬性可以控制文字的變形，這種純CSS的方法，可以確保網(wǎng)頁內(nèi)的文字保持可選，這是CSS相對于使用圖片（或背景圖片）的一個巨大優(yōu)勢。取值默認是none，也可以是由一個或空格隔開的多個變形函數(shù)列表。matrix()定義矩陣變換，即基于X和Y坐標重新定位元素的位置。translate()移動元素對象，即基于X和Y坐標重新定位元素。scale()縮放元素對象，可以使任意元素對象尺寸發(fā)生變化，取值包括正數(shù)、負數(shù)和小數(shù)。rotate()旋轉(zhuǎn)元素對象，取值為一個度數(shù)值。skew()傾斜元素對象，取值為一個度數(shù)值。2.旋轉(zhuǎn)動畫——rotate()函數(shù)rotate()函數(shù)能夠旋轉(zhuǎn)指定的元素對象，它主要在二維空間內(nèi)進行操作，接受一個角度參數(shù)值，用來指定旋轉(zhuǎn)的幅度。元素對象可以是內(nèi)聯(lián)元素和塊級元素。語法格式：rotate(<angle>)3.縮放動畫——scale()函數(shù)scale()函數(shù)能夠縮放元素。該函數(shù)包含兩個參數(shù)值，分別用來定義寬和高縮放比例。語法格式：scale(<number>[<number>])<number>參數(shù)值可以是正數(shù)、負數(shù)和小數(shù)。正數(shù)值基于指定的寬度和高度放大元素。負數(shù)值不會縮小元素，而是翻轉(zhuǎn)元素（如文字被反轉(zhuǎn)），然后再縮放元素。使用小于1的小數(shù)可以縮小元素，如果第二個參數(shù)省略，則第二參數(shù)等于第一個參數(shù)值。4.移動動畫——translate()函數(shù)translate()函數(shù)能夠重新定位元素的坐標，該函數(shù)包含兩個參數(shù)值，分別用來定義X軸和Y軸坐標。語法格式：translate(<translation-value>[,<translation-value>])<translation-value>參數(shù)表示坐標值，第一個參數(shù)表示相對于原位置的X軸偏移距離，第二個參數(shù)表示相對于原位置的Y軸偏移距離，如果省略第二個參數(shù)，則第二個參數(shù)默認為0。5.傾斜動畫——skew()函數(shù)skew()函數(shù)能夠讓元素傾斜顯示，該函數(shù)包含兩個參數(shù)值，分別用來定義X軸和Y軸坐標的角度。語法格式：skew(<angle>[,<angle>])<angle>參數(shù)表示角度值，第一個參數(shù)表示相對于X軸進行傾斜，第二個參數(shù)表示相對于Y軸進行傾斜，如果省略了第二個參數(shù)，則第二個參數(shù)值默認為0。skew()可以將一個對象圍繞X和Y軸按照一定的角度傾斜，與rotate()函數(shù)的旋轉(zhuǎn)不同，因為rotate()只是旋轉(zhuǎn)而不會改變元素的形狀。6.矩陣變形動畫——matrix()函數(shù)matrix()是矩陣函數(shù)，它可以非常靈活地實現(xiàn)各種變形效果。該函數(shù)包括6個參數(shù)（a,b,c,d,e,f），實際上matrix()函數(shù)是一個3×3矩陣，經(jīng)過該矩陣將舊的參數(shù)轉(zhuǎn)換成新值。|abe||cdf||001|語法格式：matrix(<number>,<number>,<number>,<number>,<number>,<number>)7.CSS3圖片墻設計綜合實踐綜合使用移動、旋轉(zhuǎn)、縮放等函數(shù)來控制元素，可以創(chuàng)建更豐富和更輕量級的界面和應用，示例中使用了CSS3陰影、透明效果以及變形動畫，讓圖片隨意貼在墻上，當鼠標移動到圖片上時，會自動放大并垂直擺放。8.CSS變形原點——transform-origin屬性CSS變形原點默認為對象的中心點，如果要改變這個中心點，可以使用transform-origin屬性進行定義。該屬性可以將原點設置在對象左上角、左下角等位置，使rotate等變形變得更靈活了。transform-origin接受兩個參數(shù)，它們可以是百分比、em、px等具體值，也可以是left、center、right，或者top、middle、bottom等描述性關鍵字。9.定位三維空間——transform-style指定某元素的子元素是（看起來）位于三維空間內(nèi)，還是在該元素所在的平面內(nèi)被扁平化。當該屬性值為“preserve-3d”時，元素將會創(chuàng)建局部堆疊上下文。決定一個變換元素看起來是處在三維空間還是平面內(nèi)，需要該元素的父元素上定義transform-style屬性。默認值flat指定子元素位于此元素所在平面內(nèi)，preserve-3d指定子元素定位在三維空間內(nèi)。10.觀察者位置——perspective屬性指定觀察者與“z=0”平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。“z>0”的三維元素比正常大，而“z<0”時則比正常小，大小程度由該屬性的值決定。當該屬性值為“非none”時，元素將會創(chuàng)建局部堆疊上下文。默認值none不指定透視，length指定觀察者距離“z=0”平面的距離，為元素及其內(nèi)容應用透視變換，不允許負值。11.透視點位置——perspective-origin屬性perspective-origin屬性指定透視點的位置。該屬性可以有2個參數(shù)值，如果提供兩個，第一個用于橫坐標，第二個用于縱坐標。如果只提供一個，該值將用于橫坐標；縱坐標將默認為center。取值即可以使用長度也可以使用百分比，還有：top和bottom指定透視點的縱坐標方向、left和right指定透視點的橫坐標方向和center可用于二者。12.背面可見性——backface-visibility屬性backface-visibility屬性指定元素背面面向用戶時是否可見。決定一個元素背面面向用戶時是否可見，需要直接在該元素上定義backface-visibility屬性，而不能在其父元素上，因為該屬性默認為不可繼承。默認值visible指定元素背面可見，允許顯示正面鏡像。hidden指定元素背面不可見。10.2.2CSS過渡CSSTransformation（變換）呈現(xiàn)的是一種變形效果，而CSSTransition（過渡）呈現(xiàn)的是一種過渡，也就是一種動畫轉(zhuǎn)換過程，如漸顯、漸弱、動畫快慢等。過渡可以與變形同時使用。例如，觸發(fā):hover或者:focus事件后創(chuàng)建動畫過程，如淡出背景色、滑動一個元素以及讓一個對象旋轉(zhuǎn)都可以通過CSS轉(zhuǎn)換實現(xiàn)。transition屬性是一個復合屬性，可以同時定義transition-property、transition-duration、transition-timing-function、transition-delay子屬性值。1.設置過渡的CSS屬性——transition-property屬性2.設置過渡的時間——transition-duration屬性3.設置過渡延遲時間——transition-delay屬性4.設置過渡效果——transition-timing-function屬性10.2.3CSS動畫CSS動畫暫時還不能達到Flash的動感效果或視覺沖擊力，但animation屬性確實能夠給我們帶來期望。1.@keyframes規(guī)則——關鍵幀動畫在CSS動畫設計中，關鍵幀動畫是非常重要的功能，它所包含的是一段連續(xù)的動畫。CSS樣式所實現(xiàn)的動畫效果是通過從一種樣式逐步轉(zhuǎn)變到另一種樣式來創(chuàng)建的?；菊Z法：@keyframes<identifier>{<keyframes-blocks>}<keyframes-blocks>：[[from|to|<percentage>]{sRules}][[,from|to|<percentage>]{sRules}]*說明：指定動畫名稱和動畫效果。取值identifier定義一個動畫名稱，keyframes-blocks定義動畫在每個階段的樣式，即幀動畫。2.animation屬性——實現(xiàn)元素動畫效果（1）設置CSS動畫名稱——animation-name屬性（2）設置CSS動畫時間——animation-duration屬性（3）設置CSS動畫播放方式——animation-timing-function屬性（4）設置CSS動畫開始播放的時間——animation-delay屬性（5）設置CSS動畫播放次數(shù)——animation-iteration-count屬性（6）設置CSS動畫播放方向——animation-direction屬性（7）設置CSS動畫的狀態(tài)——animation-play-state屬性（8）設置CSS動畫時間之外的狀態(tài)——animation-fill-mode屬性10.3HTML繪圖HTML5新增的<canvas>元素相當于頁面中的一塊畫布，可以在該畫布上繪制任意圖形（包括導入圖片），借助該元素自帶的API，通過編寫JavaScript代碼，還可以在<canvas>元素中控制各種圖形制作動畫效果。但如果要繪制非常復雜圖形甚至二維動畫，像Flash制作的漂亮動畫一樣，手工編碼是不現(xiàn)實的，最好借助第三方可視化制作工具，比如Adobe的AnimateCC2017就是專門用來創(chuàng)作基于HTML5Canvas的復雜圖形和二維動畫的。如果只是做一些簡單的，學一些基礎繪圖知識就夠用了，本節(jié)不詳細講解各種參數(shù)，只給些實例供大家參考。10.3.1canvas元素的基本用法在頁面中利用畫布元素canvas繪制圖形，首先要使用canvas元素創(chuàng)建一個畫布區(qū)域，并獲取該元素，然后通過獲取的canvas元素取得該圖形元素的上下文環(huán)境對象，最后根據(jù)取得的上下文環(huán)境對象在頁面中繪制圖形或動畫。與創(chuàng)建頁面中的其他元素相同，canvas元素的創(chuàng)意也十分簡單，只需要加一個標記ID號，設置元素的長和寬即可，示例代碼如下所示：<canvasid="myCanvas"width="200"height="100">你的瀏覽器不支持Canvas</canvas>畫布創(chuàng)建完成后，就可以利用畫布的上下文環(huán)境對象繪制圖形了。10.3.2繪制基本圖形使用HTML5的canvas元素不僅能夠?qū)崿F(xiàn)最簡單直接的繪圖，也能夠通過編寫腳本實現(xiàn)極為復雜的應用。本節(jié)介紹如何使用canvas元素與JavaScript腳本相結(jié)合實現(xiàn)一些簡單的基本圖形繪制。1.繪制直線2.繪制矩形3.繪制圓形4.繪制三角形5.圖形組合10.3.3繪制曲線在實際的繪圖中，繪制曲線是常用的一種繪圖形式。在設置路徑的時候，需要使用一些曲線方法來勾勒曲線路徑，以完成曲線的繪制。在canvas中，繪圖API提供了多種曲線繪制方法：arc()、arcTo()、quadraticCurveTo()和bezierCurveTo()。1.使用arc()方法2.使用arcTo()方法3.使用quadraticCurveTo()方法4.使用bezierCurveTo()方法10.3.4繪制文本canvas元素不僅可以繪制基本的圖形，還可以繪制出文字的效果。1.使用文本2.獲取文字寬度3.創(chuàng)建對象陰影10.3.5圖像的繪制與裁切有時可能需要借助一些圖片素材，使繪圖更加靈活和方便。在canvas中，繪圖API已經(jīng)提供了插入圖像的方法，只需要幾行代碼就能將圖像繪制到畫布上。1.繪制線性漸變2.繪制徑向漸變3.繪制圖像4.裁切區(qū)域10.4HTML拖放HTML5拖放API規(guī)定了所有元素都可以被拖放。拖放行為指的是用戶可以使用鼠標左鍵點擊選中允許拖放的元素或文件，在保持鼠標左鍵按下的情況下可以移動該元素至頁面的任意位置，當移動到具有允許放置狀態(tài)的元素上并釋放鼠標左鍵將放置被拖放的元素。其中，從鼠標左鍵按下選中元素，到保持鼠標左鍵按下并移動該元素的整個過程稱為“拖”；將被拖動的元素放置在許可放置的區(qū)域上方并釋放鼠標左鍵的行為稱為“放”。整個拖放過程增強了人機交互的功能。拖放元素時的一系列動作會觸發(fā)相關元素的拖放事件DragEvent，該事件繼承了鼠標事件MouseEvent。DragEvent包含的常用事件類型根據(jù)拖放生命周期觸發(fā)的事件按照順序為：ondrags