網(wǎng)頁制作案例教程HTML5+CSS3 課件 項目7 多媒體元素_第1頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項目7 多媒體元素_第2頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項目7 多媒體元素_第3頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項目7 多媒體元素_第4頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項目7 多媒體元素_第5頁
已閱讀5頁，還剩21頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

HTML5CSS3項目7多媒體元素網(wǎng)頁制作案例教程（HTML5+CSS3）教學(xué)目標(biāo)了解HTML5支持的音頻和視頻格式1了解掌握熟練2掌握HTML5中音頻的相關(guān)屬性能夠使用音頻、視頻標(biāo)簽在頁面中添加音視頻4掌握3掌握HTML5中視頻的相關(guān)屬性1audio標(biāo)記2video標(biāo)記3source標(biāo)記4制作“改革開放四十周年”網(wǎng)頁任務(wù)分解01audio標(biāo)記PART01audio標(biāo)記音頻<audio>是音頻標(biāo)記，用于在網(wǎng)頁中添加音頻，支持和實現(xiàn)音頻文件的直接播放，支持緩沖預(yù)載和多種音頻媒體格式，可以使用的音頻格式有MP3、Wav、Ogg等?；菊Z法格式<audio屬性名=“屬性值”></audio>audio標(biāo)記屬性名功能src音頻的路徑controls顯示播放控件autoplay自動播放loop循環(huán)播放muted靜音播放在<audio>標(biāo)記中，常用的屬性有src、controls、autoplay、loop等，其主要功能如表所示：audio標(biāo)記<body><audiosrc="./music/一起向未來.mp3"controls="controls"autoplay="autoplay"></audio></body>動手實踐demo1audio標(biāo)記背景音樂<audiosrc="./music/一起向未來.mp3"autoplay="autoplay"loop="loop"></audio>如果在導(dǎo)入音頻時，不使用controls屬性顯示播放控件，只使用autoplay和loop屬性實現(xiàn)自動循環(huán)播放，此時導(dǎo)入的音頻類似于背景音樂，在網(wǎng)頁打開后不顯示播放控件，自動播放音頻。02video標(biāo)記網(wǎng)頁制作案例教程（HTML5+CSS3）PART02video標(biāo)記視頻<video>是視頻標(biāo)記，用于在網(wǎng)頁中添加視頻，支持和實現(xiàn)視頻文件的直接播放，支持緩沖預(yù)載和多種視頻媒體格式，可以使用的視頻格式有MP4、WebM、Ogg等。基本語法格式如下：基本語法格式<video屬性名=“屬性值”></video>video標(biāo)記屬性名功能src視頻的路徑controls顯示播放控件autoplay自動播放loop循環(huán)播放muted靜音播放在video標(biāo)記中，常用的屬性有src、controls、autoplay、loop等，其主要功能如表所示：video標(biāo)記<body><videosrc="./video/一起向未來.mp4"controls="controls"autoplay="autoplay"

muted="muted"loop="loop"

></video></body>頁面插入視頻效果動手實踐demo203source標(biāo)記PART03source標(biāo)記不同瀏覽器對音頻的支持瀏覽器MP3WavOggInternetExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESYESNOOperaYESYESYESsource標(biāo)記瀏覽器MP4WebMOggInternetExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESNONOOperaYESYESYES不同瀏覽器對視頻的支持source標(biāo)記source<source>標(biāo)記為媒體元素（比如<video>和<audio>）定義媒體資源。<source>標(biāo)簽允許規(guī)定兩個視頻/音頻文件供瀏覽器根據(jù)它對媒體類型或者編解碼器的支持進(jìn)行選擇?；菊Z法格式<audio屬性名=“屬性值”><source屬性名=“屬性值”><source屬性名=“屬性值”></audio><video屬性名=“屬性值”><source屬性名=”屬性值”><source屬性名=“屬性值”></video>source標(biāo)記屬性名功能src音/視頻的路徑type用于說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式在<source>標(biāo)記中，常用的屬性有src、type等，其主要功能如表所示：source標(biāo)記<body><videocontrols><sourcesrc="./video/一起向未來.webm"type="video/webm"><sourcesrc="./video/一起向未來.mp4"type="video/mp4"></video></body>動手實踐demo304制作“西北之旅”網(wǎng)頁網(wǎng)頁制作案例教程（HTML5+CSS3）PART04制作“西北之旅”網(wǎng)頁祖國的大西北并非寸草不生，這里的浪漫從未停止，是烈陽，是黃土，是雪山，是草原，是大漠孤煙，是長河落日……一路走過山河湖泊，跨過戈壁沙漠，見到丹霞地貌，感受大自然的鬼斧神工，也目睹了千年莫高窟和萬里長城的終點，驚嘆于古人的智慧，從絲綢之路起點經(jīng)過河西走廊再到敦煌，真實感受到中國版圖遼闊和歷史文化的厚重感，是春風(fēng)已度玉門關(guān)，是不破樓蘭終不還！下面我們要制作“西北之旅”頁面。制作“西北之旅”網(wǎng)頁網(wǎng)頁分析制作“西北之旅”網(wǎng)頁制作步驟輸入網(wǎng)頁標(biāo)題和內(nèi)容0403新建文本文件，生成網(wǎng)頁基本代碼02打開VScode，打開項目文件夾01新建項目文件夾，準(zhǔn)備素材制作“西北之旅”網(wǎng)頁<body><divid="content"> <h2>西北之旅</h2> <audioautoplay="autoplay"loop="loop"> <sourcesrc="./music/背景音樂1.mp3"type="audio/mp3"> <sourcesrc="./music/背景音樂2.wav"type="audio/wav"> </audio> <videocontrols="controls"> <sourcesrc="./video/視頻1.mp4"type="video/mp4"> <sourcesrc="./video/視頻2.webm"type="video/webm"></video> <p>祖國的大西北并非寸草不生，這里的浪漫從未停止</p>

<p>祖是烈陽，是黃土，是雪山，是草原，是大漠孤煙，是長河落日……</p><p>一路走過山河湖泊</p><p>跨過戈壁沙漠</p>以下省略7個段落</div></body>網(wǎng)頁內(nèi)容制作“西北之旅”網(wǎng)頁<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. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論