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

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

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

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

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

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

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

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

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

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

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

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

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

在HTML5中，<audio>標(biāo)簽用于定義音頻文件?；菊Z(yǔ)法格式<audiosrc="音頻文件路徑"controls="controls"></audio>屬性值描述autoplayautoplay（可以省略）設(shè)置頁(yè)面載入完成后自動(dòng)播放音頻looploop（可以省略）設(shè)置音頻播放結(jié)束后重新開(kāi)始播放preloadauto/metadata/none設(shè)置是否在加載頁(yè)面時(shí)加載音頻9.3.3視頻、音頻文件的兼容性問(wèn)題

雖然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視頻、音頻文件的兼容性問(wèn)題在HTML5中，使用<source>標(biāo)簽可以為<video>標(biāo)簽或<audio>標(biāo)簽提供多個(gè)備用文件。使用<source>標(biāo)簽添加視頻文件的基本語(yǔ)法格式如下?；菊Z(yǔ)法格式<videocontrols="controls">

<sourcesrc="視頻文件地址"type="媒體文件類(lèi)型/格式">

<sourcesrc="視頻文件地址"type="媒體文件類(lèi)型/格式">

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

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