第9章多媒體嵌入《HTML5+CSS3網頁設計與制作（第2版）》學習目標/Target

掌握在HTML5中嵌入音頻的方法，能夠在頁面中添加音頻文件

了解常用的視頻和音頻文件格式，能夠歸納HTML5支持的視頻和音頻格式

了解視頻、音頻嵌入技術

掌握在HTML5中嵌入視頻的方法，能夠在頁面中添加視頻文件學習目標/Target

熟悉調用網絡音頻、視頻文件的方法，能夠調用互聯網中的音頻、視頻文件

了解HTML5中視頻、音頻的兼容問題，能夠制作對視頻、音頻兼容性較好的網頁

熟悉使用CSS控制視頻寬度和高度的方法，能夠設置視頻在網頁中的寬度和高度章節概述/Summary在網頁設計中，多媒體技術指的是利用視頻和音頻在網頁中傳遞信息的技術。隨著網絡傳輸速度的不斷提升，視頻和音頻技術在網頁設計中的應用越來越廣泛。與靜態的圖像和文字相比，視頻和音頻能夠提供更直觀、更豐富的信息體驗。本章將介紹多媒體嵌入技術以及如何嵌入視頻和音頻文件等。目錄/Contents010203多媒體嵌入技術概述視頻和音頻文件的格式嵌入視頻和音頻04用CSS控制視頻的寬度和高度05階段案例——制作音樂播放頁面多媒體嵌入技術概述9.19.1多媒體嵌入技術概述在全新的視頻、音頻標簽出現之前，W3C并沒有提供將視頻和音頻嵌入頁面的標準方式，音頻、視頻內容在大多數情況下都是通過第三方插件或瀏覽器的應用程序嵌入頁面中的。復雜冗長運用HTML5中新增的<video>標簽和<audio>標簽可以避免這樣的問題。目前絕大多數瀏覽器都已經支持HTML5中的<video>和<audio>標簽。瀏覽器支持版本IE瀏覽器9.0及以上版本Firefox瀏覽器3.5及以上版本Opera瀏覽器10.5及以上版本Chrome瀏覽器3.0及以上版本Safari瀏覽器3.1及以上版本Edge瀏覽器12.0及以上版本9.1多媒體嵌入技術概述9.1多媒體嵌入技術概述在不同的瀏覽器上使用<video>標簽或<audio>標簽時，瀏覽器顯示視頻或音頻的界面樣式也略有不同。Firefox瀏覽器中顯示的樣式Chrome瀏覽器中顯示的樣式視頻和音頻文件的格式9.29.2視頻和音頻文件的格式

視頻格式OggMPEG4WebM9.2視頻和音頻文件的格式

音頻格式OggMP3WAV嵌入視頻和音頻9.39.3.1在HTML5中嵌入視頻

基本語法格式<videosrc="視頻文件路徑"controls="controls"></video>屬性值描述autoplayautoplay（可以省略）設置頁面載入完成后自動播放視頻looploop（可以省略）設置視頻播放結束后重新開始播放（循環播放）preloadauto/metadata/none設置是否在加載頁面時加載視頻。auto表示加載全部視頻文件；metadata表示只加載視頻元數據；none表示不加載，為默認值。如果使用autoplay屬性，則會忽略preload屬性的作用posterurl設置一個圖像，在視頻加載完成前，會將該圖像按照一定比例顯示出來9.3.1在HTML5中嵌入視頻

自2018年1月起，Chrome瀏覽器修改了支持自動播放功能的規則，只允許在靜音模式下自動播放視頻。為了實現在Chrome瀏覽器中自動播放視頻的功能，可以在<video>標簽中添加muted屬性，使嵌入的視頻保持靜音狀態并自動播放。9.3.2在HTML5中嵌入音頻

在HTML5中，<audio>標簽用于定義音頻文件。基本語法格式<audiosrc="音頻文件路徑"controls="controls"></audio>屬性值描述autoplayautoplay（可以省略）設置頁面載入完成后自動播放音頻looploop（可以省略）設置音頻播放結束后重新開始播放preloadauto/metadata/none設置是否在加載頁面時加載音頻9.3.3視頻、音頻文件的兼容性問題

雖然HTML5支持Ogg、MP4和WebM格式的視頻文件以及Ogg、MP3和WAV格式的音頻文件，但并不是所有瀏覽器都支持這些格式。文件格式IE9及以上版本Firefox108及以上版本Opera30及以上版本Chrome43及以上版本Safari3.2及以上版本Edge79及以上版本Ogg×支持支持支持×支持MP4支持支持支持支持支持支持WebM×支持支持支持×支持文件格式IE9及以上版本Firefox108及以上版本Opera30及以上版本Chrome43及以上版本Safari3.2及以上版本Edge79及以上版本Ogg×支持支持支持×支持MP3支持支持支持支持支持支持WAV×支持支持支持支持支持9.3.3視頻、音頻文件的兼容性問題在HTML5中，使用<source>標簽可以為<video>標簽或<audio>標簽提供多個備用文件。使用<source>標簽添加視頻文件的基本語法格式如下。基本語法格式<videocontrols="controls">

<sourcesrc="視頻文件地址"type="媒體文件類型/格式">

<sourcesrc="視頻文件地址"type="媒體文件類型/格式">

……</video><source>標簽需要設置兩個屬性：src：用于指定媒體文件的URL地址。type：用于指定媒體文件的類型和格式。媒體文件的類型可以為video或audio，媒體文件的格式可以為視頻格式或音頻格式。9.3.3視頻、音頻文件的兼容性問題①在Safari瀏覽器中，如果想要正常使用WAV文件和MP4文件，需要將頁面部署到Web服務器中。如果只是簡單地在Safari瀏覽器中打開本地靜態頁面，則瀏覽器不支持這兩種格式的文件。②在使用Opera瀏覽器時，如果想要使用Ogg視頻文件，同樣需要將頁面部署到Web服務器中，否則瀏覽器不支持該格式的文件。9.3.4調用網絡視頻、音頻文件

調用網絡音頻文件和視頻文件有多個優勢，包括跨平臺兼容性、縮短加載時間、方便管理和更新等，這不僅能提升用戶的瀏覽體驗，還能提高網站維護者的工作效率。<videosrc="/2023DTSchool/DTschool.mp4"controls></video>需要注意的是，如果視頻文件或音頻文件對應的URL所在的網站發生變動，該URL將會失效，這樣的外部鏈接地址是不穩定的。因此，在設計網頁時，應盡量使用穩定的視頻或音頻外部鏈接。注意：在網頁中調用網絡視頻、音頻文件時，一定要注意版權問題，盡量選擇無須授權即可使用的視頻或音頻文件。用CSS控制視頻的寬度和高度9.49.4用CSS控制視頻的寬度和高度由于視頻文件大小不一，所以在網頁中嵌入視頻時，需要預留一定的空間，然后通過CSS控制視頻的寬度和高度，保證視頻的大小和預留空間相適應。這種做法不僅有助于控制頁面布局，還可以提升用戶的瀏覽體驗。在CSS中，可以使用width屬性和height屬性設置視頻的寬度和高度。雖然對視頻進行縮放可以調整其在頁面中的顯示尺寸，但是不會改變視頻的原始大小。如果需要壓縮視頻文件，使網頁加載和視頻播放更加流暢，可以使用視頻處理軟件進行壓縮。階段案例—制作音樂播放頁面9.59.5階段案例——制作音樂播放頁面本章前幾節重點講解了視頻和音頻文件的格式、嵌入方法以及瀏覽器兼容性問題等內容。為了加深讀者對多媒體嵌入技術的理解和運用，本節將以案例的形式分步驟制作一個音樂播放頁面。本