《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目3圖像與多媒體的應(yīng)用-制作彩的網(wǎng)頁1_第1頁
《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目3圖像與多媒體的應(yīng)用-制作彩的網(wǎng)頁1_第2頁
《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目3圖像與多媒體的應(yīng)用-制作彩的網(wǎng)頁1_第3頁
《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目3圖像與多媒體的應(yīng)用-制作彩的網(wǎng)頁1_第4頁
《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目3圖像與多媒體的應(yīng)用-制作彩的網(wǎng)頁1_第5頁
已閱讀5頁，還剩29頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目3圖像與多媒體的應(yīng)用——制作精彩的網(wǎng)頁目錄ENTERPRISEOPERATIONREPORT04.總結(jié)提升03.知識(shí)鏈接02.學(xué)習(xí)目標(biāo)01.項(xiàng)目導(dǎo)入項(xiàng)目導(dǎo)入PART01項(xiàng)目導(dǎo)入使用多媒體標(biāo)簽制作“旅行家——?dú)g迎”頁面為了使我們的網(wǎng)頁更加生動(dòng)，可以在頁面中加入多媒體元素，例如圖像、音頻及視頻等。本章節(jié)我們將使用HTML5中的多媒體標(biāo)簽，為網(wǎng)站首頁——?dú)g迎頁面添加背景音樂，使網(wǎng)頁不僅賞心悅目，并且聲臨其境。學(xué)習(xí)目標(biāo)PART02知識(shí)目標(biāo)能力目標(biāo)1、了解網(wǎng)頁中常見的多媒體格式2、了解瀏覽器對(duì)多媒體文件的支持情況

3、掌握<audio>標(biāo)簽、<video>標(biāo)簽的使用方法4、掌握<audio>標(biāo)簽、<video>標(biāo)簽的屬性1、能夠在網(wǎng)頁中插入多媒體對(duì)象2、能夠控制多媒體對(duì)象的顯示效果知識(shí)鏈接PART03一、網(wǎng)頁中常見的多媒體格式（音頻、視頻）1、網(wǎng)頁中常見的音頻格式打開一個(gè)網(wǎng)站，自動(dòng)播放的背景音樂能夠讓用戶看到頁面信息的同時(shí)，在聽覺上得到享受，以此達(dá)到進(jìn)一步傳達(dá)網(wǎng)站的氛圍的效果，使用戶沉浸其中，得到更加豐富、多重的體驗(yàn)。網(wǎng)頁中常見的音頻格式有以下幾種：（1）MP3格式（2）WMV格式（3）WMA格式（4）OGG格式1）MP3格式MP3格式是一種采用有損壓縮的音頻文件格式，其壓縮率可達(dá)到1:10。由于MP3格式格式的文件體積小，音質(zhì)較好，因此成為網(wǎng)絡(luò)上常用的音頻文件格式。（2）WMV格式WMV格式是微軟公司開發(fā)的一種音頻格式，具有高壓縮率、文件體積小等優(yōu)勢(shì)。基本所有主流播放器都支持對(duì)WMV格式文件的播放。（3）WMA格式WMA格式是微軟公司力推的一種音頻文件格式，其壓縮率可達(dá)1:18，音質(zhì)與MP3文件相似。因此也是一種體積小，同時(shí)音質(zhì)也不錯(cuò)的音頻格式。（4）OGG格式OGG格式是一種先進(jìn)的音頻壓縮格式，與MP3一樣是一種有損壓縮格式，但質(zhì)量損失較少，音質(zhì)與MP3格式的文件不相上下。同時(shí)具有支持多聲道、可以不斷改良文件大小和音質(zhì)的特點(diǎn)。一、網(wǎng)頁中常見的多媒體格式（音頻、視頻）（3）WMA格式WMA格式是微軟公司力推的一種音頻文件格式，其壓縮率可達(dá)1:18，音質(zhì)與MP3文件相似。因此也是一種體積小，同時(shí)音質(zhì)也不錯(cuò)的音頻格式。（4）OGG格式OGG格式是一種先進(jìn)的音頻壓縮格式，與MP3一樣是一種有損壓縮格式，但質(zhì)量損失較少，音質(zhì)與MP3格式的文件不相上下。同時(shí)具有支持多聲道、可以不斷改良文件大小和音質(zhì)的特點(diǎn)。一、網(wǎng)頁中常見的多媒體格式（音頻、視頻）一、網(wǎng)頁中常見的多媒體格式（音頻、視頻）2、網(wǎng)頁中常見的視頻格式（1）MP4格式MP4格式是為了播放流式媒體的高質(zhì)量視頻而專門設(shè)計(jì)的，它通過視頻壓縮技術(shù)傳輸數(shù)據(jù)，使用最少的數(shù)據(jù)獲得最佳的圖像質(zhì)量。（2）AVI格式AVI是AudioVideoInterleaved的縮寫，是Windows操作系統(tǒng)中使用的視頻文件格式。它的優(yōu)點(diǎn)是兼容性好、圖像質(zhì)量好、調(diào)用方便，缺點(diǎn)是文件尺寸較大。（3）FLV格式FLV流媒體格式全稱為FlashVideo，它形成的文件極小、加載速度極快。FLV視頻格式本身占有率低、視頻質(zhì)量良好、體積小的特點(diǎn)使它非常適合網(wǎng)絡(luò)發(fā)展。一、網(wǎng)頁中常見的多媒體格式（音頻、視頻）（4）MOV格式MOV格式是蘋果公司創(chuàng)立的一種視頻格式，初始階段只能只支持MAC電腦ios系統(tǒng)，目前也支持Windows平臺(tái)的，畫質(zhì)清晰，是一種優(yōu)良的視頻編碼格式。（5）MKV格式MKV是一種常見的視頻文件，它里面可以包含有音頻和字幕，用MKV封裝后的視頻所占存儲(chǔ)空間小于AVI源文件。但是由于是民間格式，沒有版權(quán)限制，所以官方發(fā)布的視頻影片都不采用MKV格式。1.音頻文件的嵌入利用<audio>音頻標(biāo)簽可以在網(wǎng)頁中嵌入音頻文件，在網(wǎng)頁中進(jìn)行加載和播放。<audio>標(biāo)簽的基本語法格式是：<audiosrc="音頻地址">...</audio>src屬性值為音頻文件的地址，可以是絕對(duì)地址或相對(duì)地址。一對(duì)<audio>...</audio>標(biāo)簽內(nèi)可編輯文字，作用是在不支持<audio>標(biāo)簽的瀏覽器中顯示文字替代音頻播放器。二、音頻標(biāo)簽及其屬性2.<audio>標(biāo)簽的屬性（1）播放控件在<audio>標(biāo)簽中定義controls屬性可在網(wǎng)頁中顯示瀏覽器自帶的播放器控件。無設(shè)置則播放器隱藏。使用方法如下：<audiosrc="音頻地址"controls="controls">...</audio>二、音頻標(biāo)簽及其屬性（2）自動(dòng)播放在網(wǎng)頁的實(shí)際應(yīng)用中，有時(shí)需要在打開網(wǎng)頁的同時(shí)播放音頻，為滿足這一需求，可在<audio>標(biāo)簽中定義autoplay屬性。如果設(shè)置屬性為autoplay="autoplay"或autoplay="ture"，則音頻在網(wǎng)頁加載完成后馬上播放；若無設(shè)置，則需通過播放器控件的開始按鈕手動(dòng)播放音頻?；靖袷饺缦拢?lt;audiosrc="音頻地址"autoplay="autoplay">...</audio>二、音頻標(biāo)簽及其屬性（3）音頻的循環(huán)播放Loop屬性用于定義是否循環(huán)播放音頻。若設(shè)置屬性為loop="loop"或loop="true"，則音頻循環(huán)播放。基本格式如下：<audiosrc="音頻地址"autoplay="autoplay"loop="loop">...</audio>二、音頻標(biāo)簽及其屬性【例3-1】在網(wǎng)頁中播放音頻文件，并設(shè)置為循環(huán)播放。<!DOCTYPEhtml><html><head><metacharset=utf-8"/><title>循環(huán)播放音頻文件</title></head><body><h2>循環(huán)播放音頻文件</h2><hr/><audioid="audio1"src="../media/music.mp3"controlsloop>您的瀏覽器不支持audio文件的播放</audio></body></html>二、音頻標(biāo)簽及其屬性【例3-1】在網(wǎng)頁中播放音頻文件，并設(shè)置為循環(huán)播放。完成效果如下圖所示二、音頻標(biāo)簽及其屬性（4）音頻數(shù)據(jù)的預(yù)加載HTML5提供了preload屬性用于設(shè)置音頻數(shù)據(jù)是否進(jìn)行預(yù)加載，即在頁面加載后音頻播放前，瀏覽器對(duì)音頻數(shù)據(jù)先進(jìn)行緩沖，以加快播放速度，從而提高頁面的加載速度。preload屬性有三個(gè)屬性值，分別是auto、metadata及none，其中默認(rèn)值為auto。preload屬性的基本格式如下：<audiosrc="音頻地址"preload="auto">...</audio>二、音頻標(biāo)簽及其屬性（5）設(shè)置可替換的音頻文件在<audio>標(biāo)簽中可以使用<source>標(biāo)簽指定多個(gè)待播放的文件?；靖袷饺缦拢?lt;audiosrc="音頻地址1"><sourcesrc="音頻地址2"><sourcesrc="音頻地址3"><sourcesrc="音頻地址4">......</audio>二、音頻標(biāo)簽及其屬性

在HTML5中，使用<video>標(biāo)簽定義視頻播放器，其基本格式如下：<videosrc="視頻地址">...</video>與<audio>標(biāo)簽的使用方法相同，在<video>標(biāo)簽利用src屬性設(shè)置視頻文件的URL地址，默認(rèn)狀態(tài)下不顯示播放器，如需顯示播放器，可以在標(biāo)簽內(nèi)使用controls屬性進(jìn)行設(shè)置。同時(shí)，在未定義播放器高度與寬度的情況下，播放器視頻窗口的高度與寬度等于視頻文件的原始尺寸。三、視頻標(biāo)簽及其屬性

2.<video>標(biāo)簽的屬性（1）播放控件controls：在網(wǎng)頁中顯示播放器控件。無設(shè)置則視頻無法正常播放。（2）自動(dòng)播放autoplay：屬性值為True或false。若值為true，視頻在就緒后馬上播放。此功能在IE瀏覽器中有效。（3）自定義視頻的開始與結(jié)束start：屬性值為數(shù)值。設(shè)置播放器在音頻流中開始播放的位置。無設(shè)置則默認(rèn)從開頭播放。end：屬性值為數(shù)值。設(shè)置播放在視頻中的何處停止。無設(shè)置則默認(rèn)播放到結(jié)尾。三、視頻標(biāo)簽及其屬性

（4）視頻的循環(huán)播放loop：屬性值為True或false。若值為true，則視頻會(huì)循環(huán)播放?；靖袷饺缦拢?lt;videosrc="視頻地址"loop=”true”>...</video>loopstart：屬性值為數(shù)值。設(shè)置視頻循環(huán)播放的開始位置。無設(shè)置則默認(rèn)為start屬性的值。loopend：屬性值為數(shù)值。設(shè)置視頻中循環(huán)播放的停止位置，無設(shè)置則默認(rèn)為end屬性的值。playcount：屬性值為數(shù)值。設(shè)置視頻片斷播放的次數(shù)。無設(shè)置則默認(rèn)模仿次數(shù)為1。三、視頻標(biāo)簽及其屬性

（5）播放器的高度與寬度height：屬性值為數(shù)值（單位px）或相對(duì)于父級(jí)元素的百分?jǐn)?shù)。設(shè)置播放器控件的高度。width：屬性值為數(shù)值（單位px）或相對(duì)于父級(jí)元素的百分?jǐn)?shù)。設(shè)置播放器控件的寬度。三、視頻標(biāo)簽及其屬性

【例3-3】在網(wǎng)頁中自動(dòng)播放視頻文件，設(shè)置視頻播放窗口的尺寸。<!DOCTYPEhtml><html><head><metacharset=utf-8"/><title>播放視頻文件</title></head><body><h2>播放視頻文件</h2><hr/><videosrc="../media/webintro.mp4"controlsautoplaywidth="500px"height="300px">您的瀏覽器不支持audio文件的播放</video></body></html>三、視頻標(biāo)簽及其屬性

【例3-3】在網(wǎng)頁中自動(dòng)播放視頻文件，設(shè)置視頻播放窗口的尺寸。完成效果如圖三、視頻標(biāo)簽及其屬性

（5）顯示視頻圖片poster：設(shè)置視頻加載時(shí)或播放前顯示的圖片，也可以在視頻地址錯(cuò)誤或無效的情況下進(jìn)行顯示。基本格式如下：<videosrc="視頻地址"poster="圖片地址"controls>...</video>三、視頻標(biāo)簽及其屬性【例3-4】利用<poster>標(biāo)簽設(shè)置圖片，當(dāng)視頻無法播放時(shí)顯示設(shè)置的圖片。<!DOCTYPEhtml><html><head><metacharset=utf-8"/><title>利用poster標(biāo)簽顯示視頻圖片</title></head><body><h2>利用poster標(biāo)簽顯示視頻圖片</h2><hr/><videosrc="media/movie.mp4"poster="../media/webinrto.png"controls>Yourbrowserdoesnotsupportthevideotag.</video></body></html>三、視頻標(biāo)簽及其屬性【例3-4】利用<poster>標(biāo)簽設(shè)置圖片，當(dāng)視頻無法播放時(shí)顯示設(shè)置的圖片。完成效果如圖三、視頻標(biāo)簽及其屬性（6）視頻中的source元素利用<source>標(biāo)簽設(shè)置多種格式的備用視頻文件，增加替換視頻源。<source>標(biāo)簽插入視頻中的基本語法格式為：<videowidth=""height=""controls="controls"><sourcesrc="視頻文件地址1"type="文件類型/文件格式"/><sourcesrc="視頻文件地址2"type="文件類型/文件格式"/><sourcesrc="視頻文件地址3"type="文件類型/文件格式"/>......</video>三、視頻標(biāo)簽及其屬性總結(jié)提升PART04HTML5新增標(biāo)簽<embed>標(biāo)簽用來定義一個(gè)容器，容器內(nèi)可添加多媒體文件，包括圖像、音頻、視頻等內(nèi)容。<embed>標(biāo)簽的應(yīng)用更為廣泛，支持的多媒體格式也更多?；菊Z法格式為：<embedsrc="文件地址"/><embed>標(biāo)簽的常用屬性如下：src屬性：設(shè)置要播放多媒體文件的URL。width屬性：設(shè)置播放器的寬度。height屬性：設(shè)置播放器的高度。type屬性：定義嵌入內(nèi)容的類型。一、<embed>標(biāo)簽【例3-6】利用<embed>標(biāo)簽顯示嵌入網(wǎng)頁中的MP3文件。<!DOCTYPEhtml><html><head><title>使用embed播放背景音樂</title></head><body><h2>使用embed標(biāo)簽播放背景音樂</h2>

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論