HTML5+CSS3網頁設計與制作課件：添加宣傳視頻_第1頁
HTML5+CSS3網頁設計與制作課件：添加宣傳視頻_第2頁
HTML5+CSS3網頁設計與制作課件：添加宣傳視頻_第3頁
HTML5+CSS3網頁設計與制作課件：添加宣傳視頻_第4頁
HTML5+CSS3網頁設計與制作課件：添加宣傳視頻_第5頁
已閱讀5頁，還剩19頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

添加宣傳視頻要完成D清單網頁多媒體的嵌入，需要：學習HTML5視頻和音頻格式和嵌入；分析D清單頁面中的多媒體，正確使用語義化標簽完成D清單網頁內容制作。D清單網頁多媒體分析如圖1-9-1所示。任務分析圖1-9-1D清單網頁多媒體分析圖

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

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

支持音頻的瀏覽器到目前為止，很多主流瀏覽器已經實現了對HTML5視頻格式的支持，主流的五大瀏覽器IE、Firefox、Chrome、Opera、Safari對三種視頻格式的支持情況如表1-9-2所示。1、web上的音頻知識與技能準備（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瀏覽器顯示的音頻知識與技能準備（3）嵌入音頻在HTML5中，標簽<audio>用于定義音頻的標準，它支持OggVorbis格式、MP3格式、Wav格式，其基本語法格式如下：<audiosrc=”音頻文件的路徑”></audio>插入一個音頻文件music.mp3，要求設置網頁加載完整音頻成功后準備播放，顯示音頻控件,音頻結束時重新播放。打開index.html，在<body></body>中輸入以下代碼：播放效果如圖1-9-7所示（以Chrome瀏覽器進行播放）。課堂練習1-9-2嵌入音頻123<audiosrc="music.mp3"preload="auto"controls="controls"loop="loop">

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論