no22 添加多媒體元素（音頻和視頻）

添加多媒體元素模塊8添加多媒體元素湖南安全技術職業學院網頁設計與制作教學團隊復習鞏固入門測作業分析知識回顧創建關鍵幀動畫設置animation屬性音頻、視頻等多媒體元素是現代網頁不可或缺的一部分。在游戲類網頁中添加背景音樂來營造氛圍，在新聞類網頁中通過音頻播報新聞讓用戶在忙碌時也能獲取信息，此外還有專門的一些音樂類網站。視頻能傳遞豐富的信息，吸引用戶注意力提高點擊率。比如，產品演示視頻，可以讓用戶快速了解產品特點，景點風光視頻讓用戶更直觀感受旅游目的地，網頁版的短視頻吸引了大量用戶點擊觀看。本任務學習音頻與視頻的相關知識，實現在網頁中添加音頻與視頻元素。學習內容添加音頻添加視頻

在網頁中嵌入的音頻格式主要包括MP3、WAV、Ogg等音頻格式添加音頻格式名稱格式介紹MP3MP3是一種音頻壓縮技術，其全稱是動態影像專家壓縮標準音頻層面3（MovingPictureExpertsGroupAudioLayerIII，它可以在保持較好音質的情況下大幅度降低音頻數據量。MP3體積小，音質高的特點使其成為互聯網上最常用的音頻格式。WAV屬于無損音樂格式的一種，音質高，文件大，適合對音質要求高的音頻片段，如專業音樂制作網站的音頻素材。OggVorbis當OGG文件只封裝音頻編碼時，就成為一個音頻文件，它是開源免費、沒有專利限制的有損音頻壓縮格式，能夠在保證音質的同時實現高效的壓縮，是用于代替MP3的下一代音頻壓縮技術。audio元素用來定義播放音頻文件語法：<audiosrc=”音頻文件路徑”controls=”controls”autoplay=”autoplay”loop=”loop”></audio>音頻的嵌入與控制添加音頻屬性名屬性值描

述srcURL指向要播放的音頻文件路徑，可以是相對路徑，也可以是網絡地址。controlscontrols在網頁中顯示音頻控件。autoplayautoplay音頻在就緒后馬上播放。looploop音頻循環播放。mutedmuted音頻輸出為靜音。preloadpreload音頻在頁面加載時進行加載，并預備播放，如果設置了autoplay，則忽略該屬性。<divid="music"><audiosrc="./media/song.mp3"controlsloopautoplay>

您的瀏覽器不支持audio標簽。</audio></div>在網頁中嵌入音頻兼容性處理添加音頻source元素為了確保最大的瀏覽器兼容性，可以使用source元素為瀏覽器提供備用的多個音頻文件供瀏覽器選擇使用。如：<divid="music"><audiocontrolsloop><sourcesrc="/statics/demosource/horse.ogg"><sourcesrc="/statics/demosource/horse.mp3"></audio></div>在網頁中添加音頻播放列表視頻格式添加視頻在網頁中嵌入的視頻格式主要包括MP4、WebM等格式名稱格式介紹MP4具有高效的壓縮率和廣泛的兼容性，在保持高質量的同時還能保持較小的文件大小，支持多種編解碼器，如H.264/MPEG-4AVC和AAC等，是網頁中最常見的視頻格式。WebM是一種開源免費的視頻格式，專為網絡視頻設計，支持VP8或VP9視頻編解碼器，具有良好的壓縮比和畫質，同等畫質下比H.264節省30%-50%帶寬。OGG一種開源的視頻封裝容器，可以封裝vobris音頻編碼或者theora視頻編碼，同時OGG文件也能將音頻編碼和視頻編碼進行混合封裝。視頻的嵌入與控制添加視頻video元素使用video標簽來插入視頻文件語法：<videosrc=”視頻文件路徑”controls=”controls”></video>屬性名屬性值描

述srcURL指向要播放的視頻文件路徑，可以是相對路徑，也可以是網絡地址。controlscontrols在網頁中顯示視頻控件。autoplayautoplay視頻在就緒后馬上播放。looploop視頻循環播放。mutedmuted視頻的音頻輸出為靜音。preloadpreload音頻在頁面加載時進行加載，并預備播放，如果設置了autoplay，則忽略該屬性。posterURL規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。widthpixels設置視頻播放器的寬度。heightpixels設置視頻播放器的高度。<div><videosrc="./media/movie.mp4"width="400px"controlsautoplaymutedloop>

您的瀏覽器不支持video標簽。</video></div>在網頁中嵌入視頻。實現視頻播放頁面結構視頻容器內為上下結構，上部分顯示視頻，下部分顯示文字。實現視頻播放頁面樣式漸變色背景（綠色漸變：#689408、#5e830d）。標題文字添加投影，突顯效果。視頻容器為半透明狀態，添加投影和圓角效果。課堂小結出門測內容小結音頻格式：mp3、wav、ogg添加音頻：<audiosrc=“url”controlsautoplayloop></audio>視頻格式：mp4、webm、ogg添加視頻：<videosrc=”url”controlsautoplayloopmuted></video>作業1.完