HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加宣傳視頻_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加宣傳視頻_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加宣傳視頻_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加宣傳視頻_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加宣傳視頻_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML5+CSS3網(wǎng)頁設(shè)計與制作添加宣傳視頻項目將通過“制作一個D清單網(wǎng)頁廣告單頁”項目，即通過制作一個HTML頁面來承載網(wǎng)頁制作知識，完成網(wǎng)頁開發(fā)環(huán)境搭建、HTML5標(biāo)簽、CSS3疊層樣式和響應(yīng)式布局等的學(xué)習(xí)。項目目標(biāo)D清單是某公司推出的一款跨平臺同步的待辦事項和任務(wù)提醒軟件,旨在協(xié)助您完成待辦事務(wù)比如生日提醒,旅行安排,會議準(zhǔn)備等以便更好的進(jìn)行時間和事項管理。為了方便D清單應(yīng)用的推廣，其公司需要制作一個該應(yīng)用產(chǎn)品的介紹網(wǎng)頁。該頁面主要用于手機(jī)端進(jìn)行分享推廣，同時也要求能夠在電腦端進(jìn)行訪問。前端工程師小王所在的科技公司已經(jīng)拿到了設(shè)計稿，如圖1所示。主管希望他擔(dān)任本次項目的前端工作，開發(fā)完成后將成果交付給程序員完成邏輯制作、測試和發(fā)布。項目情境圖1-1-1項目移動端和電腦端頁面截圖網(wǎng)頁制作的一般流程如下：項目分析項目發(fā)布需求分析規(guī)劃設(shè)計實施測試交付根據(jù)“移動優(yōu)先”原則，我們需要制定項目完成的計劃：項目分析時間段1時間段2時間段3時間段4時間段5分析規(guī)劃實施階段1移動端內(nèi)容制作階段2移動端格式制作階段3響應(yīng)式制作測試與交付D清單前端開發(fā)甘特圖時間進(jìn)度任務(wù)制作網(wǎng)頁內(nèi)容能夠表述video元素支持的三種視頻格式及支持的瀏覽器能夠利用video元素在HTML5中添加并顯示視頻能夠表述audio元素支持的三種音頻格式及支持的瀏覽器能夠利用audio元素在HTML5中添加并播放音頻能夠應(yīng)用video元素為D清單網(wǎng)頁添加宣傳視頻。任務(wù)目標(biāo)

添加宣傳視頻本次任務(wù)要求在D清單網(wǎng)頁中添加宣傳視頻。完成后的效果圖如圖1-9所示。任務(wù)描述圖1-9添加宣傳視頻后的網(wǎng)頁效果圖

添加宣傳視頻要完成D清單網(wǎng)頁多媒體的嵌入，需要：學(xué)習(xí)HTML5視頻和音頻格式和嵌入；分析D清單頁面中的多媒體，正確使用語義化標(biāo)簽完成D清單網(wǎng)頁內(nèi)容制作。D清單網(wǎng)頁多媒體分析如圖1-9-1所示。任務(wù)分析圖1-9-1D清單網(wǎng)頁多媒體分析圖

添加宣傳視頻知識與技能準(zhǔn)備（1）視頻的格式視頻格式包含視頻編碼、音頻編碼和容器格式。目前，HTML5支持三種視頻格式，分別是Ogg格式、MPEG4格式、WebM格式。三種格式具體情況如下：Ogg：帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件MPEG4：帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件WebM：帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件（2）支持視頻的瀏覽器到目前為止，很多主流瀏覽器已經(jīng)實現(xiàn)了對HTML5視頻格式的支持，主流的五大瀏覽器IE、Firefox、Chrome、Opera、Safari對三種視頻格式的支持情況如表1-9-1所示。1、web上的視頻知識與技能準(zhǔn)備（2）支持視頻的瀏覽器格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No表1-3-1常見的短語元素知識與技能準(zhǔn)備（2）支持視頻的瀏覽器圖1-9-2Chrome瀏覽器視頻界面表1-9-1列舉了各主流瀏覽器對三種視頻格式的支持情況，但在不同瀏覽器上，顯示的視頻效果是略有不同的，這是因為不同瀏覽器對內(nèi)置視頻控件樣式的定義不同，從而導(dǎo)致了播放控件的顯示樣式不同。如圖1-9-2和圖1-9-3所示效果。圖1-9-3Firefox瀏覽器視頻界面知識與技能準(zhǔn)備（3）嵌入視頻在HTML5中，標(biāo)簽<video>用于定義視頻的標(biāo)準(zhǔn)，它支持Ogg格式、MPEG4格式、WebM格式，其基本語法格式如下：<videosrc=”視頻文件的路徑”></video>要求：在HTML5中插入視頻women.mp4，設(shè)置該視頻加載完畢后自動播放，重復(fù)播放，顯示播放控件。打開index.html，在<body></body>中輸入以下代碼：課堂練習(xí)1-9-1嵌入視頻123<videosrc="women.mp4"autoplaycontrols="controls"loop="loop">

你的瀏覽器不支持該視頻格式!</video>顯示效果如圖1-9-4所示（以Chrome瀏覽器進(jìn)行播放）。圖1-9-4嵌入視頻知識與技能準(zhǔn)備（4）video屬性（1）autoplay屬性autoplay表示當(dāng)頁面加載完成后自動播放，取值同樣為autoplay。其語法格式如下：<videosrc="視頻文件的地址"autoplay=”autoplay”>（2）loop屬性loop是視頻結(jié)束時重新開始播放，即循環(huán)播放，取值同樣為loop。其語法格式如下：<videosrc="視頻文件的地址"loop=”loop”>（3）preload屬性preload是一個比較特殊的屬性，該屬性和autoplay屬性沖突。preload屬性表示視頻在網(wǎng)頁頁面加載的過程中也進(jìn)行加載，并預(yù)備播放。但如果autoplay屬性同時存在，系統(tǒng)會將preload屬性自動忽略。其語法格式如下：<videosrc="視頻文件的地址"preload=”preload”>（4）controls屬性controls用于顯示播放控件，如按鈕等。其語法格式如下：<videosrc="視頻文件的地址"controls=”controls”>（5）width和height屬性width和height用于設(shè)置視頻播放器的寬度和高度。知識與技能準(zhǔn)備（1）音頻的格式網(wǎng)頁上的音頻主要是播放音頻文件。目前，HTML5支持三種音頻格式，分別是OggVorbis格式、MP3格式、Wav格式。三種格式具體情況如下：OggVorbis：是一種免費(fèi)、開源的音頻編碼，用來替代MP3的下一代音頻壓縮技術(shù)。MP3：一種常見的音頻壓縮技術(shù)，用來大幅度降低音頻數(shù)據(jù)量，是目前主流的音頻壓縮格式。Wav：錄音時用的標(biāo)準(zhǔn)Windows文件格式，數(shù)據(jù)本身是一種無損的音樂格式。（2）

支持音頻的瀏覽器到目前為止，很多主流瀏覽器已經(jīng)實現(xiàn)了對HTML5視頻格式的支持，主流的五大瀏覽器IE、Firefox、Chrome、Opera、Safari對三種視頻格式的支持情況如表1-9-2所示。1、web上的音頻知識與技能準(zhǔn)備（2）支持音頻的瀏覽器IE9Firefox3.5Opera10.5Chrome3.0Safari3.0OggVorbis

√√√

MP3√

√√Wav

√√

√表1-9-2五大瀏覽器對三種視頻格式的支持情況表2-8-1列舉了各主流瀏覽器對三種音頻格式的支持情況，同視頻播放一樣，在不同瀏覽器上，顯示的音頻效果略有不同。如圖1-9-5和圖1-9-6所示效果。圖1-9-5Chrome瀏覽器顯示的音頻圖1-9-6Firefox瀏覽器顯示的音頻知識與技能準(zhǔn)備（3）嵌入音頻在HTML5中，標(biāo)簽<audio>用于定義音頻的標(biāo)準(zhǔn)，它支持OggVorbis格式、MP3格式、Wav格式，其基本語法格式如下：<audiosrc=”音頻文件的路徑”></audio>插入一個音頻文件music.mp3，要求設(shè)置網(wǎng)頁加載完整音頻成功后準(zhǔn)備播放，顯示音頻控件,音頻結(jié)束時重新播放。打開index.html，在<body></body>中輸入以下代碼：播放效果如圖1-9-7所示（以Chrome瀏覽器進(jìn)行播放）。課堂練習(xí)1-9-2嵌入音頻123<audiosrc="music.mp3"preload="auto"controls="controls"loop="loop">

你的瀏覽器不支持該音頻格式！</audio>圖1-9-7嵌入音頻知識與技能準(zhǔn)備（4）audio屬性Audio常用的屬性除了必備的src屬性外，還有autoplay、loop、preload、poster四個屬性。其用法和video屬性中的一致。任務(wù)實施1、打開完成的網(wǎng)頁文件index.html所在目錄，創(chuàng)建一個video名稱的文件夾，并將視頻儲存到該目錄。2、打開網(wǎng)頁文件index.html，完成宣傳視頻的添加：3、運(yùn)行頁面，測試視頻能否正常播放。1234<section><videoclass=

溫馨提示

  • 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

提交評論