HTML5中的圖像、音頻和視頻_第1頁
HTML5中的圖像、音頻和視頻_第2頁
HTML5中的圖像、音頻和視頻_第3頁
HTML5中的圖像、音頻和視頻_第4頁
HTML5中的圖像、音頻和視頻_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

HTML5中的圖像、音頻和視頻第4章4.3在網(wǎng)頁中插入視頻<video>4.1文件路徑4.2在頁面中插入圖像<img>4.5使用多種來源的多媒體和備用文本<source>4.4在網(wǎng)頁中插入音頻<audio>4.8綜合實例——多媒體頁面的設計4.6插入多媒體文件<embed>4.7定義媒介分組和標題<figure>/<figcaption>HTML5中的圖像、音頻和視頻HTML5中新增的元素改變了現(xiàn)有的局面，它提供了音頻和視頻的標準接口，在支持HTML5的瀏覽器中不需要安裝任何插件就可以播放視頻、動畫和音頻等多媒體元素。本章學習目標：

（1）掌握文件路徑

（2）掌握圖像元素的使用方法。

（3）掌握多媒體元素的常用屬性及使用方法。

文件路徑就是文件在電腦中的位置，表示文件路徑的方式有兩種，相對路徑和絕對路徑。4.1

文件路徑4.1.1絕對路徑

絕對路徑包含了指向目錄或文件的完整信息，包括模式、主機名和路徑。就路徑來說，絕對路徑本身與被引用文件的實際位置無關，無論是在哪個主機上的網(wǎng)頁中，某一文件的絕對路徑都是完全一樣的。

例如："/index.html""89"4.1.2相對路徑

相對路徑就是指由這個文件所在的路徑引起的跟其它文件（或文件夾）的路徑關系。

圖4-1文件結(jié)構(gòu)1、引用同一目錄下的文件

例如：如圖4-1所示，文件夾admin中的文件login.html要訪問logout.html，相對路徑為"logout.html"。2、引用子目錄下的文件

例如：如圖4-1所示，文件夾admin中的文件login.html要訪問logout.html，相對路徑為"logout.html"。3、引用上層目錄的文件

如果要引用文件層次結(jié)構(gòu)中更上層目錄中的文件，那么應該使用兩個句點和一個斜杠，每個../都表示“到當前文件的上一層”。

例如：如圖4-1所示，login.html文件要訪問book.html文件，相對路徑為"../bookstore/book.html"4、根相對路徑

根路徑是從網(wǎng)站的最底層開始起，一般的網(wǎng)站的根目錄就是域名下對應的文件夾。

例如：如圖4-1所示，cart.html文件訪問foot.png，如果寫成根路徑為"/images/foot.png"當前，Web上用的最廣泛的三種格式是GIF、PNG和JPEG。1.JPEG格式JPEG格式由一個軟件開發(fā)聯(lián)合會組織制定，是一種有損壓縮格式，能夠?qū)D像壓縮在很小的儲存空間，圖像中重復或不重要的資料會被丟失，因此容易造成圖像數(shù)據(jù)的損傷,文件后輟名為“．jpg”或“．jpeg”。2.GIF格式GIF文件的數(shù)據(jù)，是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式。3.PNG格式PNG是無損的格式，因此采用這種格式對圖像進行壓縮時不會造成品質(zhì)的損失。GIF只有256種顏色，但PNG卻支持幾百萬種顏色。4.2

在頁面中插入圖像<img>4.2.2插入圖像<imgsrc="url"/>1、圖像資源屬性——src屬性在<img>元素中src屬性是不能缺省的?；菊Z法：2、圖像替代文本——alt屬性使用alt屬性，可以為圖像添加一段描述性文本，當圖像不能夠正常顯示或鼠標指向圖片并暫停在圖片上時會顯示的替代文本?；菊Z法：<imgsrc="url"alt="替代文本"/>3、圖像的寬高——width和height屬性基本語法：<imgsrc="url"width="像素|百分比"height="像素|百分比"/><!DOCTYPEhtml><html><head><title>圖像的應用</title></head><body><h1>風景圖片</h1><imgsrc="images/image6.jpg"alt="圖片不存在"/><imgsrc="images/image2.jpg"alt="圖片原始尺寸"/><imgsrc="images/image3.jpg"alt="規(guī)定寬帶，高度自動等比例變化"width="300"/><imgsrc="images/image4.jpg"alt="規(guī)定寬帶和高度"width="300"height="305"/>

</body></html>圖4-2<img>圖像的應用瀏覽效果【例4-1】使用<img>圖像的應用（4-1.html）

在HTML中播放視頻并不容易，為此HTML5中新增了video元素，video元素是用來處理視頻元素。4.3

在網(wǎng)頁中插入視頻<video>4.3.1視頻格式

HTML5支持三種視頻文件格式：mp4、webm和ogg。目前各種瀏覽器支持的視頻格式不一致。如表4-1列出不同瀏覽器支持的視頻格式。4.3.2插入視頻

<videosrc="url"controls="controls"autoplay="autoplay"width="百分比|像素"height="百分比|像素"preload="auto|meida|none"loop="loop">瀏覽器不支持video，會顯示此部分內(nèi)容</video>

通過HTML5的新增加的video標記，可以快速的在網(wǎng)頁中嵌入影片，只要使用的瀏覽器支持視頻格式，不需要安裝任何第三方插件?；菊Z法：<!DOCTYPEhtml><html><head><title>video元素示例</title></head><body><h1>請欣賞video元素應用示例</h1><h2>自動播放并帶控制條</h2><videosrc="medias/video.mp4"autoplay="autoplay"controls="controls"width="350">您的瀏覽器不支持video元素</video><h2>不自動播放設置</h2><videosrc="medias/video.mp4"controls="controls"width="350"preload="meta"poster="images/image2.jpg">您的瀏覽器不支持video元素</video></body></html>圖4-3video元素瀏覽效果【例4-2】使用<video>元素示例（4-2.html）和<video>元素類似，HTML5新增的<audio>元素用于加載音頻文件，HTML5規(guī)定了一種通過<audio>元素來包含音頻的標準方法。4.4

在網(wǎng)頁中插入音頻<audio>4.4.1音頻格式

音頻目前主要有5種格式：mp3、oggvorbis、wav、mp4和aac。如表4-3列出不同瀏覽器支持的視頻格式。4.4.2插入音頻

<audiosrc="url"controls="controls"autoplay="autoplay"preload="auto|meida|none"loop="loop">瀏覽器不支持audio，會顯示此部分內(nèi)容</audio><audio>元素能夠播放聲音文件或音頻流。<audio>元素的屬性與<video>元素具有的屬性大致相同，不過<audio>元素比<video>元素常用的屬性少了四個，分別是：muted、width、height、poster?；菊Z法：<!DOCTYPEhtml><html><head><title>audio元素示例</title></head><body><h2>打開自動播放音頻</h2><audiosrc="medias/秋意濃.mp3"autoplay="autoplay"controls="controls"width="350">您的瀏覽器不支持audio元素</audio></body></html>圖4-4audio元素瀏覽效果【例4-3】使用<audio>元素示例（4-3.html）由于不同的瀏覽器對HTML5的支持各不相同，要獲得所有兼容HTML5的瀏覽器的支持，至少需要提供兩種格式以上的視頻和音頻。<source>元素用于定義一個以上的媒體元素。4.5

使用多種來源的多媒體和備用文本<source>

<source>元素可以鏈接不同的媒體文件，例如視頻文件和音頻文件等。<source>元素常用的屬性如表4-5所示。

<videowidth="369"height="208"controls="controls"><sourcesrc="paddle-steamer.mp4"type="video/mp4"><sourcesrc="paddle-steamer.webm"type="video/webm">瀏覽器不支持video元素</video><video>元素或者<audio>中可以指定多個<source>元素。例如：在某些情況下，必須包含一些不被<audio>和<video>元素支持的內(nèi)容，此時應該使用<embed>元素進行處理。對于要求使用外部輔助應用程序或插件的多媒體內(nèi)容——如AdobeFlash，<embed>元素正好派上用場。4.6

插入多媒體文件<embed><embedsrc="url"width="像素"height="像素"type="類型"></embed>基本語法：<!DOCTYPEhtml><html><head><title>embed元素示例</title></head><body><h2>播放flash文件</h2><embedsrc="medias/3vdesign.swf"width="350"/></body></html>圖4-5<embed>示例瀏覽效果【例4-4】使用<embed>加入flash示例（4-4.html）<figure>和<figcaption>是兩個經(jīng)常在一起使用的語義化元素。<figure>元素不僅僅只限于圖片的使用，也適用于其它元素，例如:代碼塊、視頻、音頻剪輯、廣告。<figcaption>元素代表了<figure>元素的一個標題或者說是其相關解釋。4.7

定義媒介分組和標題<figure>/<figcaption><figure><figcaption>標題</figcaption>…</figure>基本語法：<!DOCTYPEhtml><html><head><title>figure示例</title></head><body><figure><figcaption>風景圖片</figcaption><figure><imgsrc="images/image1.gif"alt="Gif動畫圖片"><figcaption>Gif動畫圖片</figcaption></figure><figure><imgsrc="images/image5.jpg"alt="海邊日落"><figcaption>海邊日落</figcaption></figure></figure></body></html>圖4-6figure元素瀏覽效果【例4-5】使用<figure>元素示例（4-5.html）4.8綜合實例——多媒體頁面的設計HTML5中新增的元素改變了現(xiàn)有的局面，它提供了音頻和視頻的標準接口，在支持HTML5的瀏覽器中不需要安裝任何插件就可以播放視頻、動畫和音頻等多媒體元素。<!DOCTYPEhtml><html><head><title>英雄聯(lián)盟</title></head><body><h3>英雄聯(lián)盟</h3><p><b>英雄聯(lián)盟</b>……</p><hr/><figure><figca

溫馨提示

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

評論

0/150

提交評論