HTML5 CSS3網(wǎng)頁設(shè)計與制作（第2版）課件 第9章 多媒體嵌入

第9章多媒體嵌入《HTML5+CSS3網(wǎng)頁設(shè)計與制作（第2版）》學(xué)習(xí)目標(biāo)/Target

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

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

了解視頻、音頻嵌入技術(shù)

掌握在HTML5中嵌入視頻的方法，能夠在頁面中添加視頻文件學(xué)習(xí)目標(biāo)/Target

熟悉調(diào)用網(wǎng)絡(luò)音頻、視頻文件的方法，能夠調(diào)用互聯(lián)網(wǎng)中的音頻、視頻文件

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

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

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

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

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

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

在HTML5中，<audio>標(biāo)簽用于定義音頻文件。基本語法格式<audiosrc="音頻文件路徑"controls="controls"></audio>屬性值描述autoplayautoplay（可以省略）設(shè)置頁面載入完成后自動播放音頻looploop（可以省略）設(shè)置音頻播放結(jié)束后重新開始播放preloadauto/metadata/none設(shè)置是否在加載頁面時加載音頻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>標(biāo)簽可以為<video>標(biāo)簽或<audio>標(biāo)簽提供多個備用文件。使用<source>標(biāo)簽添加視頻文件的基本語法格式如下?；菊Z法格式<videocontrols="controls">

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

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

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

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