版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
HTML5CSS3項(xiàng)目7多媒體元素網(wǎng)頁(yè)制作案例教程（HTML5+CSS3）教學(xué)目標(biāo)了解HTML5支持的音頻和視頻格式1了解掌握熟練2掌握HTML5中音頻的相關(guān)屬性能夠使用音頻、視頻標(biāo)簽在頁(yè)面中添加音視頻4掌握3掌握HTML5中視頻的相關(guān)屬性1audio標(biāo)記2video標(biāo)記3source標(biāo)記4制作“改革開(kāi)放四十周年”網(wǎng)頁(yè)任務(wù)分解01audio標(biāo)記PART01audio標(biāo)記音頻<audio>是音頻標(biāo)記，用于在網(wǎng)頁(yè)中添加音頻，支持和實(shí)現(xiàn)音頻文件的直接播放，支持緩沖預(yù)載和多種音頻媒體格式，可以使用的音頻格式有MP3、Wav、Ogg等?；菊Z(yǔ)法格式<audio屬性名=“屬性值”></audio>audio標(biāo)記屬性名功能src音頻的路徑controls顯示播放控件autoplay自動(dòng)播放loop循環(huán)播放muted靜音播放在<audio>標(biāo)記中，常用的屬性有src、controls、autoplay、loop等，其主要功能如表所示：audio標(biāo)記<body><audiosrc="./music/一起向未來(lái).mp3"controls="controls"autoplay="autoplay"></audio></body>動(dòng)手實(shí)踐demo1audio標(biāo)記背景音樂(lè)<audiosrc="./music/一起向未來(lái).mp3"autoplay="autoplay"loop="loop"></audio>如果在導(dǎo)入音頻時(shí)，不使用controls屬性顯示播放控件，只使用autoplay和loop屬性實(shí)現(xiàn)自動(dòng)循環(huán)播放，此時(shí)導(dǎo)入的音頻類似于背景音樂(lè)，在網(wǎng)頁(yè)打開(kāi)后不顯示播放控件，自動(dòng)播放音頻。02video標(biāo)記網(wǎng)頁(yè)制作案例教程（HTML5+CSS3）PART02video標(biāo)記視頻<video>是視頻標(biāo)記，用于在網(wǎng)頁(yè)中添加視頻，支持和實(shí)現(xiàn)視頻文件的直接播放，支持緩沖預(yù)載和多種視頻媒體格式，可以使用的視頻格式有MP4、WebM、Ogg等?；菊Z(yǔ)法格式如下：基本語(yǔ)法格式<video屬性名=“屬性值”></video>video標(biāo)記屬性名功能src視頻的路徑controls顯示播放控件autoplay自動(dòng)播放loop循環(huán)播放muted靜音播放在video標(biāo)記中，常用的屬性有src、controls、autoplay、loop等，其主要功能如表所示：video標(biāo)記<body><videosrc="./video/一起向未來(lái).mp4"controls="controls"autoplay="autoplay"
muted="muted"loop="loop"
></video></body>頁(yè)面插入視頻效果動(dòng)手實(shí)踐demo203source標(biāo)記PART03source標(biāo)記不同瀏覽器對(duì)音頻的支持瀏覽器MP3WavOggInternetExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESYESNOOperaYESYESYESsource標(biāo)記瀏覽器MP4WebMOggInternetExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESNONOOperaYESYESYES不同瀏覽器對(duì)視頻的支持source標(biāo)記source<source>標(biāo)記為媒體元素（比如<video>和<audio>）定義媒體資源。<source>標(biāo)簽允許規(guī)定兩個(gè)視頻/音頻文件供瀏覽器根據(jù)它對(duì)媒體類型或者編解碼器的支持進(jìn)行選擇。基本語(yǔ)法格式<audio屬性名=“屬性值”><source屬性名=“屬性值”><source屬性名=“屬性值”></audio><video屬性名=“屬性值”><source屬性名=”屬性值”><source屬性名=“屬性值”></video>source標(biāo)記屬性名功能src音/視頻的路徑type用于說(shuō)明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式在<source>標(biāo)記中，常用的屬性有src、type等，其主要功能如表所示：source標(biāo)記<body><videocontrols><sourcesrc="./video/一起向未來(lái).webm"type="video/webm"><sourcesrc="./video/一起向未來(lái).mp4"type="video/mp4"></video></body>動(dòng)手實(shí)踐demo304制作“西北之旅”網(wǎng)頁(yè)網(wǎng)頁(yè)制作案例教程（HTML5+CSS3）PART04制作“西北之旅”網(wǎng)頁(yè)祖國(guó)的大西北并非寸草不生，這里的浪漫從未停止，是烈陽(yáng)，是黃土，是雪山，是草原，是大漠孤煙，是長(zhǎng)河落日……一路走過(guò)山河湖泊，跨過(guò)戈壁沙漠，見(jiàn)到丹霞地貌，感受大自然的鬼斧神工，也目睹了千年莫高窟和萬(wàn)里長(zhǎng)城的終點(diǎn)，驚嘆于古人的智慧，從絲綢之路起點(diǎn)經(jīng)過(guò)河西走廊再到敦煌，真實(shí)感受到中國(guó)版圖遼闊和歷史文化的厚重感，是春風(fēng)已度玉門關(guān)，是不破樓蘭終不還！下面我們要制作“西北之旅”頁(yè)面。制作“西北之旅”網(wǎng)頁(yè)網(wǎng)頁(yè)分析制作“西北之旅”網(wǎng)頁(yè)制作步驟輸入網(wǎng)頁(yè)標(biāo)題和內(nèi)容0403新建文本文件，生成網(wǎng)頁(yè)基本代碼02打開(kāi)VScode，打開(kāi)項(xiàng)目文件夾01新建項(xiàng)目文件夾，準(zhǔn)備素材制作“西北之旅”網(wǎng)頁(yè)<body><divid="content"> <h2>西北之旅</h2> <audioautoplay="autoplay"loop="loop"> <sourcesrc="./music/背景音樂(lè)1.mp3"type="audio/mp3"> <sourcesrc="./music/背景音樂(lè)2.wav"type="audio/wav"> </audio> <videocontrols="controls"> <sourcesrc="./video/視頻1.mp4"type="video/mp4"> <sourcesrc="./video/視頻2.webm"type="video/webm"></video> <p>祖國(guó)的大西北并非寸草不生，這里的浪漫從未停止</p>
<p>祖是烈陽(yáng)，是黃土，是雪山，是草原，是大漠孤煙，是長(zhǎng)河落日……</p><p>一路走過(guò)山河湖泊</p><p>跨過(guò)戈壁沙漠</p>以下省略7個(gè)段落</div></body>網(wǎng)頁(yè)內(nèi)容制作“西北之旅”網(wǎng)頁(yè)<style>*{margin:0px;padding:0px;
box-sizing:border-box;}
body{
font-size:1em;
font-family:"微軟雅黑";}
#content{
width:1000px;
margin:0auto;
}#contenth2{text-align:center;line-height:60px;}#contentvideo{margin:0auto;display:block;width:500px;margin-bottom:5
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 課題申報(bào)參考：精神生活共同富裕視域下紅色文化旅游深度融合的響應(yīng)機(jī)制與路徑研究
- 課題申報(bào)參考：教育治理現(xiàn)代化背景下現(xiàn)代產(chǎn)業(yè)學(xué)院內(nèi)部治理結(jié)構(gòu)的優(yōu)化研究
- 2025年c語(yǔ)言實(shí)習(xí)心得體會(huì)模版（4篇）
- 2025版房地產(chǎn)尾款支付及產(chǎn)權(quán)過(guò)戶協(xié)議3篇
- 二零二五年車輛抵押維修保養(yǎng)合同3篇
- 二零二五版貿(mào)促會(huì)棉花期貨交易專區(qū)棉花現(xiàn)貨買賣合同3篇
- 二零二五年度企業(yè)法律風(fēng)險(xiǎn)防控培訓(xùn)合同3篇
- 主體架構(gòu)工程分包合同(2024年度)一
- 專屬分店管理承包協(xié)議模板版A版
- 二零二五年度多人合伙經(jīng)營(yíng)酒吧合作協(xié)議范本3篇
- 《健康體檢知識(shí)》課件
- 生產(chǎn)計(jì)劃主管述職報(bào)告
- 名表買賣合同協(xié)議書
- JTG-T-F20-2015公路路面基層施工技術(shù)細(xì)則
- 2024年遼寧石化職業(yè)技術(shù)學(xué)院?jiǎn)握新殬I(yè)適應(yīng)性測(cè)試題庫(kù)附答案
- 中西方校服文化差異研究
- 《子宮肉瘤》課件
- 《準(zhǔn)媽媽衣食住行》課件
- 給男友的道歉信10000字(十二篇)
- 客人在酒店受傷免責(zé)承諾書范本
- 練字本方格模板
評(píng)論
0/150
提交評(píng)論