教案序號：16授課日期課時數4章節名稱任務17視頻與音頻教學內容重點嵌入視頻和音頻的方法。難點視頻與音頻的DOM操作。教學目的與要求了解網頁支持的視頻、音頻格式。掌握HTML5中視頻、音頻的相關屬性及嵌入視頻、音頻的操作。了解視頻與音頻的DOM操作。教學方法與手段教師采用任務驅動法，使用教學PPT輔助授課。教師操作演示，學生實訓練習。學生課前課后均可通過“浙江省高等學校在線開放課程共享平臺”的配套微課學習。作業及思考題完成課堂上未完成的習題，通過網絡平臺上交作業。通過回帖的方式回答課上留下的思考題。預習下一節內容。

講授內容課堂組織第一學時（任務17視頻與音頻17.1嵌入視頻、17.2嵌入音頻）實操任務目標發布實戰演練——制作音樂播放器圖16-SEQ圖\*ARABIC\r11“音樂播放器”網頁強化訓練——制作視頻播放網頁圖16-SEQ圖\*ARABIC2“視頻播放”網頁知識準備嵌入視頻<videosrc="視頻文件路徑"controls="controls"></video>嵌入音頻<audiosrc="音頻文件路徑"controls="controls"></audio>source標簽source標簽：沒有一種視頻格式或音頻格式讓所有的瀏覽器都支持，source標簽用于指定多個備用的不同格式文件的路徑，瀏覽器將使用第一個可識別的格式。第二學時（任務17視頻與音頻17.4視頻與音頻的DOM操作）知識準備視頻與音頻的DOM操作video和audio的方法方法含義load()加載媒體文件，為播放做準備。通常用于播放前的預加載，也會用于重新加載媒體文件。play()播放媒體文件。如果視頻沒有加載，則加載并播放；如果視頻是暫停的，則變為播放。pause()暫停播放媒體文件。canPlayType()測試瀏覽器是否支持指定的媒體類型。video和audio的屬性屬性含義currentSrc返回當前媒體的URL。currentTime設置或返回媒體中的當前播放位置（以秒計）。duration返回媒體的長度（以秒計）。ended返回媒體的播放是否已結束。error返回表示媒體錯誤狀態的MediaError對象。paused設置或返回媒體是否暫停。muted設置或返回是否關閉聲音。volume設置或返回媒體的音量。height設置或返回媒體的高度值。width設置或返回媒體的寬度值。video和audio的事件事件含義play當執行方法play()時觸發。playing正在播放時觸發。pause當執行了方法pause()時觸發。timeupdate當播放位置被改變時觸發。ended當播放結束后停止播放時觸發。waiting在等待加載下一幀時觸發。ratechange當媒體的播放速度已更改時觸發。volumechange當音量已更改時觸發。canplay當瀏覽器可以播放媒體時觸發。canplaythrough當瀏覽器可在不因緩沖而停頓的情況下進行播放時觸發。durationchange當媒體的時長已更改時觸發。Loadstart當瀏覽器開始查找媒體時觸發。progress當瀏覽器正在下載媒體時觸發。suspend當瀏覽器刻意不獲取媒體數據時觸發。abort當媒體的加載已放棄時觸發。error當在媒體加載期間發生錯誤時觸發。emptied當目前的播放列表為空時觸發。stalled當瀏覽器嘗試獲取媒體數據，但數據不可用時觸發。loadedmetadata當瀏覽器已加載媒體的元數據時觸發。loadeddata當瀏覽器已加載媒體的當前幀時觸發。seeked當用戶已移動/跳躍到媒體中的新位置時觸發。seeking當用戶開始移動/跳躍到媒體中的新位置時觸發。第三學時實戰演練——制作音樂播放器案例描述：設計并制作音樂播放器，網頁效果和布局圖如下。圖16-SEQ圖\*ARABIC3“音樂播放器”網頁圖16-SEQ圖\*ARABIC4“音樂播放器”的網頁布局第四學時強化訓練——制作視頻播放網頁案例描述：設計并制作視頻播放網頁，網頁效果和布局圖如下圖16-SEQ圖\*ARABIC5“視頻播放”網頁圖16-SEQ圖\*ARABIC6“視頻播放”的網頁布局課后實訓制作如圖所示的視頻播放器。視頻播放器沒有控制欄，通過“播放/暫停”按鈕控制。同時，“放大”按鈕可以放大視頻，“縮小”按鈕可以