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

下載本文檔

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

文檔簡(jiǎn)介

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

（1）掌握文件路徑

（2）掌握?qǐng)D像元素的使用方法。

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

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

文件路徑4.1.1絕對(duì)路徑

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

例如："/index.html""89"4.1.2相對(duì)路徑

相對(duì)路徑就是指由這個(gè)文件所在的路徑引起的跟其它文件（或文件夾）的路徑關(guān)系。

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

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

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

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

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

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

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

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

</body></html>圖4-2<img>圖像的應(yīng)用瀏覽效果【例4-1】使用<img>圖像的應(yīng)用（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，會(huì)顯示此部分內(nèi)容</video>

通過HTML5的新增加的video標(biāo)記，可以快速的在網(wǎng)頁中嵌入影片，只要使用的瀏覽器支持視頻格式，不需要安裝任何第三方插件?；菊Z法：<!DOCTYPEhtml><html><head><title>video元素示例</title></head><body><h1>請(qǐng)欣賞video元素應(yīng)用示例</h1><h2>自動(dòng)播放并帶控制條</h2><videosrc="medias/video.mp4"autoplay="autoplay"controls="controls"width="350">您的瀏覽器不支持video元素</video><h2>不自動(dòng)播放設(shè)置</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>元素來包含音頻的標(biāo)準(zhǔn)方法。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，會(huì)顯示此部分內(nèi)容</audio><audio>元素能夠播放聲音文件或音頻流。<audio>元素的屬性與<video>元素具有的屬性大致相同，不過<audio>元素比<video>元素常用的屬性少了四個(gè)，分別是：muted、width、height、poster?；菊Z法：<!DOCTYPEhtml><html><head><title>audio元素示例</title></head><body><h2>打開自動(dòng)播放音頻</h2><audiosrc="medias/秋意濃.mp3"autoplay="autoplay"controls="controls"width="350">您的瀏覽器不支持audio元素</audio></body></html>圖4-4audio元素瀏覽效果【例4-3】使用<audio>元素示例（4-3.html）由于不同的瀏覽器對(duì)HTML5的支持各不相同，要獲得所有兼容HTML5的瀏覽器的支持，至少需要提供兩種格式以上的視頻和音頻。<source>元素用于定義一個(gè)以上的媒體元素。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>中可以指定多個(gè)<source>元素。例如：在某些情況下，必須包含一些不被<audio>和<video>元素支持的內(nèi)容，此時(shí)應(yīng)該使用<embed>元素進(jìn)行處理。對(duì)于要求使用外部輔助應(yīng)用程序或插件的多媒體內(nèi)容——如AdobeFlash，<embed>元素正好派上用場(chǎng)。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>是兩個(gè)經(jīng)常在一起使用的語義化元素。<figure>元素不僅僅只限于圖片的使用，也適用于其它元素，例如:代碼塊、視頻、音頻剪輯、廣告。<figcaption>元素代表了<figure>元素的一個(gè)標(biāo)題或者說是其相關(guān)解釋。4.7

定義媒介分組和標(biāo)題<figure>/<figcaption><figure><figcaption>標(biāo)題</figcaption>…</figure>基本語法：<!DOCTYPEhtml><html><head><title>figure示例</title></head><body><figure><figcaption>風(fēng)景圖片</figcaption><figure><imgsrc="images/image1.gif"alt="Gif動(dòng)畫圖片"><figcaption>Gif動(dòng)畫圖片</figcaption></figure><figure><imgsrc="images/image5.jpg"alt="海邊日落"><figcaption>海邊日落</figcaption></figure></figure></body></html>圖4-6figure元素瀏覽效果【例4-5】使用<figure>元素示例（4-5.html）4.8綜合實(shí)例——多媒體頁面的設(shè)計(jì)HTML5中新增的元素改變了現(xiàn)有的局面，它提供了音頻和視頻的標(biāo)準(zhǔn)接口，在支持HTML5的瀏覽器中不需要安裝任何插件就可以播放視頻、動(dòng)畫和音頻等多媒體元素。<!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等.壓縮文件請(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)論