單元8-電影音樂網(wǎng)-頁面中插入視頻、音頻、動畫《WEB前端開發(fā)實(shí)用案例教程》_第1頁
單元8-電影音樂網(wǎng)-頁面中插入視頻、音頻、動畫《WEB前端開發(fā)實(shí)用案例教程》_第2頁
單元8-電影音樂網(wǎng)-頁面中插入視頻、音頻、動畫《WEB前端開發(fā)實(shí)用案例教程》_第3頁
單元8-電影音樂網(wǎng)-頁面中插入視頻、音頻、動畫《WEB前端開發(fā)實(shí)用案例教程》_第4頁
單元8-電影音樂網(wǎng)-頁面中插入視頻、音頻、動畫《WEB前端開發(fā)實(shí)用案例教程》_第5頁
已閱讀5頁，還剩43頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

《WEB前端開發(fā)實(shí)用案例教程》

第八單元電影音樂網(wǎng)

——頁面中插入視頻、音頻、動畫第1頁，共48頁。

隨著多媒體技術(shù)的發(fā)展，原先單一的圖片、文字網(wǎng)頁內(nèi)容發(fā)展為多種媒體集合的表現(xiàn)形式。在網(wǎng)頁中應(yīng)用多媒體技術(shù)，如視頻、音頻、Flash動畫等內(nèi)容，可以增強(qiáng)網(wǎng)頁的表現(xiàn)效果，使網(wǎng)頁更生動，激發(fā)訪問者興趣。教學(xué)目標(biāo)：

掌握網(wǎng)頁視頻、音頻、動畫的標(biāo)簽元素使用掌握瀏覽器對視頻文件和音頻文件、動畫的使用掌握播放控件的正確使用方法

第2頁，共48頁。目錄頁/Contents01

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面02

任務(wù)2婉約配樂頁面——頁面中播放音樂

任務(wù)3新春寄語頁面——頁面中插入動畫03第3頁，共48頁。知識儲備01第4頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【知識儲備】目前國內(nèi)外網(wǎng)站提供的視頻內(nèi)容可謂各有千秋。視頻播放器是一種用于播放各種視頻文件的多媒體播放軟件。常見的視頻格式有“wmv”、“avi”、“mpg”、“rmvb”等，F(xiàn)lash視頻是一種新的流媒體視頻格式，其文件擴(kuò)展名為“.flv”。Flash視頻文件極小、加載速度極快，它的出現(xiàn)有效地解決了視頻文件導(dǎo)入Flash后，使導(dǎo)出的SWF文件體積龐大，不能在網(wǎng)絡(luò)上很好的使用等缺點(diǎn)，使網(wǎng)絡(luò)觀看視頻文件成為可能。使用<video>標(biāo)簽來定義視頻播放器，實(shí)現(xiàn)了包括播放、暫停、進(jìn)度和音量控制、全屏等功能，更重要的是可以自定義這些功能和控制欄的樣式。第5頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【知識儲備】視頻可以理解為一系列連續(xù)的圖片，<video>標(biāo)簽的使用方法與<img>標(biāo)簽非常相似，語法是：<videosrc=”視頻文件路徑”controls></video>含義為，src屬性用于設(shè)置視頻文件的路徑，也可以為該標(biāo)簽設(shè)置with和height的值；controls屬性用于為視頻提供播放控件，src和controls是<video>標(biāo)簽的基本屬性。<video>標(biāo)簽支持3種視頻格式，具體是為：1）ogg，帶有throra視頻和vorbis音頻編碼的ogg文件。2）mpeg4，帶有H.264視頻編碼和AAC音頻編碼的mpeg4文件。3）webm，帶有VP8視頻編碼和vorbis音頻編碼的webm文件。第6頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【知識儲備】<video>標(biāo)簽的用于控制視頻播放的常用屬性，見表8-1<video>標(biāo)簽屬性。表8-1<video>標(biāo)簽屬性屬性取值取值說明autoplayautoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。heightpixels設(shè)置視頻播放器的高度。looploop如果出現(xiàn)該屬性，則當(dāng)媒體文件播放完后再次開始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的視頻的URL。widthpixels設(shè)置視頻播放器的寬度。第7頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【知識儲備】因版權(quán)原因，瀏覽器支持相應(yīng)的視頻格式需要向該視頻格式的開發(fā)者購買使用資格，并不是所有瀏覽器對所有的視頻格式都支持。常用瀏覽器對視頻的支持概括見表8-2常用瀏覽器與視頻文件的支持。

表8-2常用瀏覽器與視頻文件的支持瀏覽器及平臺支持的視頻格式ChromeMP4,WebM,oggFirefoxMP4,WebMInternetExplorerMP4AndroidMP4iOSMP4SafariMP4第8頁，共48頁。素材收集02創(chuàng)建站點(diǎn)，用DreamweaverCS制作網(wǎng)頁(實(shí)例圖片文字內(nèi)容見本章素材文件夾)實(shí)例素材：第八單元\viedo效果文件：第八單元\“viedo-1.html”

第9頁，共48頁。任務(wù)實(shí)施03第10頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【任務(wù)實(shí)施】微視頻網(wǎng)頁具體制作，我們分為構(gòu)建HTML結(jié)構(gòu)和設(shè)置CSS樣式屬性兩部分來進(jìn)行。1）構(gòu)建HTML結(jié)構(gòu)（1）將素材實(shí)例文件夾拷貝至創(chuàng)建MyWeb站點(diǎn)的根目錄中。（2）啟動DreamweaverCS，打開“文件”面板，在拷貝的文件夾中創(chuàng)建一個名為“viedo-1.html”的網(wǎng)頁文檔，并在文檔編輯窗口中打開。（3）添加圖片。（4）添加視頻。（5）添加播放器按鈕。（6）使用JavaScript定義了一個控制播放或者暫停的按鈕，使用onliclick事件定義方法。第11頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【任務(wù)實(shí)施】

<body><divid="vd"><videoid="myVideo"width="630"><!--判斷是否支持其播放器--><sourcesrc="myVideo.ogg"type="video/ogg"/><sourcesrc="myVideo.webm"type="video/webm"/><sourcesrc="myVideo.mp4"type="video/mp4"/>您的瀏覽器不支持video標(biāo)簽</video>

<br/><buttonid="playPause"onclick="playPause();">播放</button><buttononclick="goBack(5);">快進(jìn)5秒</button><buttononclick="goBack(-5);">快退5秒</button><buttononclick="volume(0.1);">音量+</button><buttononclick="volume(-0.1);">音量-</button><buttonid="isMuted"onclick="isMuted();">靜音</button></div></body><scripttype="text/javascript"src="js/video.js"charset="gbk"></script>代碼如下：（7）保存文件。按Ctrl+S組合鍵保存網(wǎng)頁，然后按F12鍵在瀏覽器中預(yù)覽效果，此頁面完成。第12頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【任務(wù)實(shí)施】

button{display:inline-block;/*強(qiáng)制轉(zhuǎn)換為行內(nèi)塊元素*/outline:none;/*該元素獲得焦點(diǎn)時，不出現(xiàn)虛線框（或高亮框）*/cursor:pointer;/*鼠標(biāo)懸停時變?yōu)椤靶∈帧?/text-align:center;text-decoration:none;/*字體樣式：字體大小14px/行高100%字體名稱*/2）構(gòu)建CSS樣式（1）設(shè)置CSS樣式屬性整體頁面中文字元素代碼，使用外部樣式表。<linkrel="stylesheet"type="text/css"href="css/video.css"/>內(nèi)容代碼如下：代碼內(nèi)容1

第13頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【任務(wù)實(shí)施】

font:14px/100%Arial,Helvetica,sans-serif;padding:0.5em2em0.55em;/*頂部內(nèi)邊距0.5em、左右內(nèi)邊距2em、底部內(nèi)邊距0.55em*/text-shadow:01px1pxrgba(0,0,0,0.3);/*文本陰影*/-webkit-border-radius:0.5em;-moz-border-radius:0.5em;border-radius:0.5em;/*邊框圓角*/background-color:#944bc8;color:white;}代碼內(nèi)容2

第14頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【任務(wù)實(shí)施】

button:hover{/*設(shè)置所有按鈕鼠標(biāo)懸停效果*/text-decoration:none;/*清除文本樣式*/}#vd{margin:0auto;background-image:url(../images/a.png); width:700px;height:450px;padding-top:120px;padding-left:40px; }代碼內(nèi)容3

第15頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【任務(wù)實(shí)施】

（2）保存文件。按Ctrl+S組合鍵保存網(wǎng)頁，然后按F12鍵在瀏覽器中預(yù)覽效果，此頁面完成。如圖8-1所示的預(yù)覽效果頁面。圖8-1預(yù)覽效果頁面第16頁，共48頁。知識歸納04

第17頁，共48頁。

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面【知識歸納】

媒體文件類型video是代表視頻，在video標(biāo)簽中添加controls屬性，用于設(shè)置或返回瀏覽器應(yīng)當(dāng)顯示標(biāo)準(zhǔn)的音頻空間。單擊播放按鈕，視頻開始播放。如圖8-2所示的視頻開始播放效果。

圖8-2視頻開始播放效果第18頁，共48頁。目錄頁/Contents01

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面02

任務(wù)2婉約配樂頁面——頁面中播放音樂

任務(wù)3新春寄語頁面——頁面中插入動畫03第19頁，共48頁。知識儲備01第20頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【知識儲備】

在網(wǎng)頁中添加聲音有兩種方式，一種是以插入音頻的形式，通過播放器控制音頻；另一種是以添加背景音樂的形式，在加載頁面時自動播放音頻。1.插入背景音樂，使用<bgsound>元素，只適用于ie，基本語法是:

屬性說明src="url音樂路徑"，表示設(shè)定midi檔案及路徑，可以是相對或絕對。屬性說明autostart=true，表示是否在音樂檔下載完之后就自動播放。true是，false否(內(nèi)定值)。屬性說明loop=infinite，表示是否自動反復(fù)播放。loop=2表示重復(fù)兩次，infinite表示重復(fù)多次。

<bgsoundsrc="url音樂路徑"autostart=trueloop=infinite>第21頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【知識儲備】

2.插入音頻，使用<embed>元素標(biāo)簽。<embed>用來插入各種多媒體，格式可以是midi、wav、aiff、au等等，netscape及新版的IE都支持。其參數(shù)設(shè)定如下，基本語法是:屬性設(shè)置說明:1）自動播放：語法：autostart=true、false說明：該屬性規(guī)定音頻或視頻文件是否在下載完之后就自動播放。true：音樂文件在下載完之后自動播放；false：音樂文件在下載完之后不自動播放。示例：<embedsrc="your.mid"autostart=true><embedsrc="your.mid"autostart=false>

<embedsrc="url音樂路徑"autostart="true"loop="true"hidden="true">第22頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【知識儲備】

2）循環(huán)播放：語法：loop=正整數(shù)、true、false說明：該屬性規(guī)定音頻或視頻文件是否循環(huán)及循環(huán)次數(shù)。屬性值為正整數(shù)值時，音頻或視頻文件的循環(huán)次數(shù)與正整數(shù)值相同；屬性值為true時，音頻或視頻文件循環(huán)；屬性值為false時，音頻或視頻文件不循環(huán)。示例：<embedsrc="your.mid"autostart=trueloop=2><embedsrc="your.mid"autostart=trueloop=true><embedsrc="your.mid"autostart=trueloop=false>

第23頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【知識儲備】3）面板顯示：語法：hidden=ture、flase說明：該屬性規(guī)定控制面板是否顯示，默認(rèn)值為flase。ture：隱藏面板；flase：顯示面板。示例：<embedsrc="your.mid"hidden="ture"><embedsrc="your.mid"hidden="no">4）開始時間：語法：starttime=mm:ss（分：秒）說明：該屬性規(guī)定音頻或視頻文件開始播放的時間。未定義則從文件開頭播放。示例：<embedsrc="your.mid"starttime="00:10">第24頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【知識儲備】

5）音量大?。赫Z法：volume=0-100之間的整數(shù)說明：該屬性規(guī)定音頻或視頻文件的音量大小。未定義則使用系統(tǒng)本身的設(shè)定。示例：<embedsrc="your.mid"volume="10">6）容器屬性：語法：height=#width=#說明：取值為正整數(shù)或百分?jǐn)?shù)，單位為像素。該屬性規(guī)定控制面板的高度和寬度。height：控制面板的高度；width：控制面板的寬度。示例：<embedsrc="your.mid"height=200width=200>第25頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【知識儲備】7）容器單位：語法：units=pixels、en說明：該屬性指定高和寬的單位為pixels或en。示例：<embedsrc="your.mid"units="pixels"height=200width=200><embedsrc="your.mid"units="en"height=200width=200>8）外觀設(shè)置：語法：controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever說明：該屬性規(guī)定控制面板的外觀。默認(rèn)值是console。console：一般正常面板；smallconsole：較小的面板；playbutton：只顯示播放按鈕；pausebutton：只顯示暫停按鈕；stopbutton：只顯示停止按鈕；volumelever：只顯示音量調(diào)節(jié)按鈕。示例：<embedsrc="your.mid"controls=smallconsole><embedsrc="your.mid"controls=volumelever>

第26頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【知識儲備】9）對象名稱：語法：name=#說明：#為對象的名稱。該屬性給對象取名，以便其他對象利用。示例：<embedsrc="your.mid"name="sound1">10）說明文字：語法：title=#說明：#為說明的文字。該屬性規(guī)定音頻或視頻文件的說明文字。示例：<embedsrc="your.mid"title="第一首歌">11）前景色和背景色：語法：palette=color|color說明：該屬性表示嵌入的音頻或視頻文件的前景色和背景色，第一個值為前景色，第二個值為背景色，中間用|隔開。color可以是rgb色（rrggbb）也可以是顏色名，還可以是transparent（透明）。示例：<embedsrc="your.mid"palette="red|black">

第27頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【知識儲備】12）對齊方式：語法：align=top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom說明：該屬性規(guī)定控制面板和當(dāng)前行中的對象的對齊方式。center：控制面板居中；left：控制面板居左；right：控制面板居右；top：控制面板的頂部與當(dāng)前行中的最高對象的頂部對齊；bottom：控制面板的底部與當(dāng)前行中的對象的基線對齊；baseline：控制面板的底部與文本的基線對齊；texttop：控制面板的頂部與當(dāng)前行中的最高的文字頂部對齊；middle：控制面板的中間與當(dāng)前行的基線對齊；absmiddle：控制面板的中間與當(dāng)前文本或?qū)ο蟮闹虚g對齊；absbottom：控制面板的底部與文字的底部對齊。示例：<embedsrc="your.mid"align=top><embedsrc="your.mid"align=center>

第28頁，共48頁。素材收集02創(chuàng)建站點(diǎn)，用DreamweaverCS制作網(wǎng)頁(實(shí)例圖片文字內(nèi)容見本章素材文件夾)實(shí)例素材：第八單元\audio效果文件：第八單元\“audio1.html”、“audio2.html”第29頁，共48頁。任務(wù)實(shí)施03第30頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【任務(wù)實(shí)施】

網(wǎng)頁中播放音頻使用<audio>標(biāo)簽來定義，下面將呈現(xiàn)電影插曲音樂的制作方法。1）構(gòu)建HTML結(jié)構(gòu)（1）將素材實(shí)例文件夾拷貝至創(chuàng)建MyWeb站點(diǎn)的根目錄中。（2）啟動DreamweaverCS，打開“文件”面板，在拷貝的文件夾中創(chuàng)建一個名為“audio1.html”的網(wǎng)頁文檔，并在文檔編輯窗口中打開。（3）添加圖片。（4）添加音樂。添加代碼如下:

<divclass="img"></div><audiosrc="m1.mp3"controls="controls"></audio>

第31頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【任務(wù)實(shí)施】

（5）保存文件。按Ctrl+S組合鍵保存網(wǎng)頁，然后按F12鍵在瀏覽器中預(yù)覽效果，此頁面完成。如圖8-3所示的插入音樂播放器。圖8-3插入音樂播放器第32頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【任務(wù)實(shí)施】

2）構(gòu)建CSS樣式（1）頁面中引入CSS樣式屬性方法。在<head></head>標(biāo)簽之間輸入如下代碼：（2）設(shè)置CSS樣式屬性頁面中圖片元素代碼：<styletype="text/css"><!----></style>.img{ margin-left:20px; background-image:url(music2.png); widows:262px; height:264px; background-repeat:no-repeat; }

第33頁，共48頁。

任務(wù)2婉約配樂頁面——頁面中播放音樂【任務(wù)實(shí)施】

（3）保存文件。按Ctrl+S組合鍵保存網(wǎng)頁，然后按F12鍵在瀏覽器中預(yù)覽效果，此頁面完成。如圖8-4所示的預(yù)覽效果頁面。圖8-4預(yù)覽效果頁面第34頁，共48頁。知識歸納04使用<bgsound>標(biāo)簽來定義網(wǎng)頁中背景音效，完成圖8-5所示效果第35頁，共48頁。目錄頁/Contents01

任務(wù)1微視頻網(wǎng)頁展播——視頻播放頁面02

任務(wù)2婉約配樂頁面——頁面中播放音樂

任務(wù)3新春寄語頁面——頁面中插入動畫03第36頁，共48頁。知識儲備01第37頁，共48頁。

任務(wù)3新春寄語頁面——頁面中插入動畫

【知識儲備】

Flash是網(wǎng)上流行的矢量動畫技術(shù)，近幾年很多站點(diǎn)都采用了Flash技術(shù)，把傳統(tǒng)網(wǎng)頁無法做到的效果準(zhǔn)確表現(xiàn)出來，增強(qiáng)了網(wǎng)頁的吸引力，如使用Flash制作的導(dǎo)航條、按鈕動感十足。Dreamweaver中提供的Flash元素主要包括Flash動畫、FlashPaper、Flash視頻，以及內(nèi)建的Flash按鈕和Flash文本。Flash動畫中的元素都是矢量的，可以隨意放大，都不會降低畫面質(zhì)量。此外，F(xiàn)lash動畫文件較小，適合在網(wǎng)絡(luò)上使用。Flash動畫的擴(kuò)展名為“.swf”?！局R儲備】第38頁，共48頁。

任務(wù)3新春寄語頁面——頁面中插入動畫

【知識儲備】

網(wǎng)頁中插入flash的三種方法，分別為:1.網(wǎng)頁中插入Object元素標(biāo)簽，實(shí)現(xiàn)插入FLASH動畫。通過可視化界面，“插入”下拉菜單選項(xiàng)中選擇“媒體”，繼續(xù)選擇“SWF”文件，找到要插入的SWF文件，然后確定。如圖8-7所示的插入動畫?！局R儲備】圖8-7插入動畫第39頁，共48頁。

任務(wù)3新春寄語頁面——頁面中插入動畫

【知識儲備】輸入標(biāo)題確認(rèn)，如圖8-8所示的對象標(biāo)簽輔助功能屬性【知識儲備】圖8-8對象標(biāo)簽輔助功能屬性第40頁，共48頁。

任務(wù)3新春寄語頁面——頁面中插入動畫

【知識儲備】在可視化界面中，動畫插入完成，可見圖8-9插入動畫【知識儲備】

圖8-9插入動畫第41頁，共48頁。

任務(wù)3新春寄語頁面——頁面中插入動畫

【知識儲備】2.embed方式

代碼中object的部分去掉，僅留embed標(biāo)簽，flash也可正常先顯示。這種方式在IE和firefox下瀏覽均很正常。3.SWFObject方式這是一個第三方控件，可以到SWFObject官方下載：/p/swfobject/解壓之后把其中的swfobject.js和exp

溫馨提示

  • 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

提交評論