在網(wǎng)頁(yè)中的文本信息直觀(guān)、明了，而多媒體信息更富內(nèi)涵和視覺(jué)沖擊力。恰當(dāng)使用不同類(lèi)型的多媒體可以展示個(gè)性，突出重點(diǎn)，吸引用戶(hù)。在HTML5之前，需要借助插件為網(wǎng)頁(yè)添加多媒體，如Adobe Flash Player、蘋(píng)果的QuickTime等。HTML5引入原生的多媒體技術(shù)，設(shè)計(jì)多媒體更簡(jiǎn)便，用戶(hù)體驗(yàn)更好。

1、認(rèn)識(shí)HTML5圖像

圖像與文本一樣都是重要的網(wǎng)頁(yè)對(duì)象，適當(dāng)插入圖像可以豐富網(wǎng)頁(yè)信息，增強(qiáng)頁(yè)面的可欣賞性。圖像本身具有很強(qiáng)的視覺(jué)沖擊力，可以吸引瀏覽者的眼球，制作精巧、設(shè)計(jì)合理的圖像能激發(fā)瀏覽者瀏覽網(wǎng)頁(yè)的興趣。

在網(wǎng)頁(yè)中使用的圖像類(lèi)型包括3種：GIF、JPEG和PNG。

1.1、GIF圖像

1. 無(wú)損壓縮，不降低圖像的品質(zhì)，而是減少顯示色，最多可以顯示256色。
2. 支持透明背景。
3. 可以設(shè)計(jì)GIF動(dòng)畫(huà)。

1.2、JPEG圖像

1. 有損壓縮，在壓縮過(guò)程中，圖像的某些細(xì)節(jié)將被忽略，但一般的瀏覽者看不出來(lái)。
2. 支持1670萬(wàn)種顏色，可以很好地再現(xiàn)色彩豐富的攝影圖像。
3. 不支持透明背景和交錯(cuò)顯示功能。

1.3、PNG圖像

PNG具有GIF圖像和JPEG圖像的雙重優(yōu)點(diǎn)。一方面，它可以無(wú)損壓縮文件，壓縮技術(shù)比GIF好；另一方面，它支持的顏色數(shù)量達(dá)到1670萬(wàn)種，同時(shí)支持索引色、灰度、真彩色以及Alpha通道透明等功能。

在網(wǎng)頁(yè)設(shè)計(jì)中，如果圖像顏色少于256色，推薦使用GIF格式，如logo等；如果顏色較豐富，建議選用JPEG或PNG格式，如新聞?wù)掌取?/p>

2、設(shè)計(jì)圖像

HTML 5.1新增picture元素和img元素的srcset、sizes屬性，使得響應(yīng)式圖片的實(shí)現(xiàn)更為簡(jiǎn)單便捷，很多主流瀏覽器的新版本也對(duì)這些新增加的內(nèi)容支持良好。

2.1、使用img元素

在HTML5中，使用標(biāo)簽可以把圖像插入網(wǎng)頁(yè)中，具體用法如下。

    <img src="URL" alt="替代文本" />

img元素向網(wǎng)頁(yè)中嵌入一幅圖像，從技術(shù)上分析，<img>標(biāo)簽并不會(huì)在網(wǎng)頁(yè)中插入圖像，而是從網(wǎng)頁(yè)上鏈接圖像，<img>標(biāo)簽創(chuàng)建的是被引用圖像的占位空間。

提示：標(biāo)簽有兩個(gè)必需的屬性：alt屬性和src屬性。具體說(shuō)明如下：

• alt屬性：設(shè)置圖像的替代文本。
• src屬性：定義顯示圖像的URL。

【示例】在頁(yè)面中插入一幅照片，在瀏覽器中的預(yù)覽效果如下圖：

    <img src="images/1.jpg" width="400"  alt="HTML5"/>

HTML5為標(biāo)簽定義了多個(gè)可選屬性，簡(jiǎn)單說(shuō)明如下:

• height：定義圖像的高度。取值單位可以是像素或者百分比。
• width：定義圖像的寬度。取值單位可以是像素或者百分比。
• ismap：將圖像定義為服務(wù)器端圖像映射。
• usemap：將圖像定義為客戶(hù)端圖像映射。
• longdesc：指向包含長(zhǎng)的圖像描述文檔的URL。

不再推薦使用HTML4中的部分屬性，如align（水平對(duì)齊方式）、border（邊框粗細(xì)）、hspace（左右空白）、vspace（上下空白），對(duì)于這些屬性，HTML5建議使用CSS屬性代替使用。

2.2、定義流內(nèi)容

流內(nèi)容是由頁(yè)面上的文本引述出來(lái)的。在HTML5出現(xiàn)之前，沒(méi)有專(zhuān)門(mén)實(shí)現(xiàn)這個(gè)目的的元素，因此一些開(kāi)發(fā)人員使用沒(méi)有語(yǔ)義的div元素表示。通過(guò)引入figure和figcaption元素，HTML5改變了這種情況。

流內(nèi)容可以是圖表、照片、圖形、插圖、代碼片段，以及其他類(lèi)似的獨(dú)立內(nèi)容。可以由頁(yè)面上的其他內(nèi)容引出figure。figcaption是figure的標(biāo)題，可選，出現(xiàn)在figure內(nèi)容的開(kāi)頭或結(jié)尾處。例如：

    <figure>
        <p>思索</p>
        <img src="images/1.jpg" width="350" />
    </figure>

這里figure只有一張照片，放置多個(gè)圖像或其他類(lèi)型的內(nèi)容（如數(shù)據(jù)表格、視頻等）也是允許的。figcaption元素并不是必需的，但如果包含它，它就必須是figure元素內(nèi)嵌的第一個(gè)或最后一個(gè)元素。

【示例】下面包含新聞圖片及其標(biāo)題的figure，顯示在article文本中間。圖以縮進(jìn)的形式顯示，這是瀏覽器的默認(rèn)樣式:

    <article>
        <h1>我國(guó)首次實(shí)現(xiàn)月球軌道交會(huì)對(duì)接 嫦娥五號(hào)完成在軌樣品轉(zhuǎn)移</h1>
        <p>12月6日，航天科技人員在北京航天飛行控制中心指揮大廳監(jiān)測(cè)嫦娥五號(hào)上升器與軌道器返回器組合體交會(huì)對(duì)接
情況。</p>
        <p>記者從國(guó)家航天局獲悉，12月6日5時(shí)42分，嫦娥五號(hào)上升器成功與軌道器返回器組合體交會(huì)對(duì)接，并于6時(shí)
12分將月球樣品容器安全轉(zhuǎn)移至返回器中。這是我國(guó)航天器首次實(shí)現(xiàn)月球軌道交會(huì)對(duì)接。</p>
        <figure>
            <figcaption>新華社記者<b>金立旺</b>攝</figcaption>
            <img src="images/news.jpg" alt="嫦娥五號(hào)完成在軌樣品轉(zhuǎn)移" /> </figure>
        <p>來(lái)源：<a href="http://www.xinhuanet.com/">新華網(wǎng)</a></p>
    </article>

figure元素可以包含多個(gè)內(nèi)容塊。不過(guò)，不管figure包含多少內(nèi)容，只允許有一個(gè)figcaption。

注意：不要簡(jiǎn)單地將figure作為在文本中嵌入獨(dú)立內(nèi)容實(shí)例的方法。在這種情況下，通常更適合用aside元素。要了解如何結(jié)合使用blockquote和figure元素。

可選的figcaption必須與其他內(nèi)容一起包含在figure里面，不能單獨(dú)出現(xiàn)在其他位置。figcaption中的文本是對(duì)內(nèi)容的一句簡(jiǎn)短描述即可，就像照片的描述文本。

在默認(rèn)情況下，現(xiàn)代瀏覽器會(huì)為figure添加寬40px的左右外邊距?？梢允褂肅SS的margin-left和margin-right屬性修改這一樣式。例如，使用margin-left:0;讓圖像直接抵到頁(yè)面左邊緣。還可以使用figure { float: left; }讓包含figure的文本環(huán)繞在它周?chē)@樣文本就會(huì)圍繞在圖像的右側(cè)?？赡苓€需要為figure設(shè)置width，使之不至于占據(jù)太大的水平空間。

2.3、插入圖標(biāo)

網(wǎng)站圖標(biāo)一般顯示在瀏覽器選項(xiàng)卡、歷史記錄、書(shū)簽、收藏夾或地址欄中。圖標(biāo)大小一般為16px×16px，透明背景。移動(dòng)設(shè)備iPhone圖標(biāo)大小為57px×57px或114px×114px（Retina屏），iPad圖標(biāo)大小為72px×72px或144px×144px（Retina屏）。Android系統(tǒng)支持該尺寸的圖標(biāo)。

【示例】下面通過(guò)多步操作，演示如何在一個(gè)網(wǎng)站中插入圖標(biāo)。

第1步，創(chuàng)建一個(gè)大小為16px×16px的圖像，保存為favicon.ico，注意擴(kuò)展名為.ico。為Retina屏創(chuàng)建一個(gè)32px×32px的圖像。

提示：ico文件允許在同一個(gè)文件中包含多個(gè)不同尺寸的同名文件。

第2步，為觸屏設(shè)備至少創(chuàng)建一個(gè)圖像，并保存為PNG格式。如果只創(chuàng)建了一個(gè)圖像，將其命名為apple-touchicon.png。如有需要，還可以創(chuàng)建其他的觸屏圖標(biāo)。

第3步，將圖標(biāo)圖像放在網(wǎng)站根目錄下。

第4步，新建HTML5文檔，在網(wǎng)頁(yè)頭部位置輸入下面的代碼：

    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

第5步，瀏覽網(wǎng)頁(yè)，瀏覽器會(huì)自動(dòng)在根目錄尋找特定的文件名，找到后就將圖標(biāo)顯示出來(lái)。

如果瀏覽器無(wú)法顯示，可能是瀏覽器緩存過(guò)大和生成圖標(biāo)過(guò)慢，嘗試清除緩存，或者先訪(fǎng)問(wèn)圖標(biāo)鏈接(http://localhost/favicon.ico)，然后再訪(fǎng)問(wèn)網(wǎng)站，就可以正常顯示了。

2.4、定義替代文本

使用alt屬性可以為圖像添加一段描述性文本，當(dāng)圖像由于某種原因不顯示的時(shí)候，就將這段文字顯示出來(lái)。屏幕閱讀器可以朗讀這些文本，以幫助視障訪(fǎng)問(wèn)者理解圖像的內(nèi)容。

HTML5規(guī)范推薦將alt文本理解為圖像的替代性描述。例如：

    <img src="tulip.jpg" alt="上海鮮花港 - 郁金香" />

在IE瀏覽器中，替代文本出現(xiàn)在一個(gè)帶叉的小方塊旁邊，且兩者由一個(gè)方框包圍。在Firefox和Opera等其他瀏覽器中，替代文本是單獨(dú)出現(xiàn)的。Chrome和Safari瀏覽器不會(huì)顯示alt文本，而是顯示缺失圖像的圖標(biāo)。

提示：如果圖像對(duì)內(nèi)容的價(jià)值較小，對(duì)視障用戶(hù)來(lái)說(shuō)不太重要，則可以提供空的替代文本，即alt=“”。如果圖像與鄰近的文本表達(dá)的信息相似，也可以將alt屬性置空。

注意，不要用alt文本代替圖像的caption。在這種情況下，可以考慮將img放入一個(gè)figure元素，并添加一個(gè)figcaption元素。

如果圖像是頁(yè)面設(shè)計(jì)的一部分，而不是內(nèi)容的一部分，則考慮使用CSS的backgroundimage屬性引入該圖像，而不是使用img標(biāo)記。

2.5、定義Retina顯示

Retina是一種顯示標(biāo)準(zhǔn)，就是把更多的像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度，也稱(chēng)為視網(wǎng)膜顯示屏。

在網(wǎng)頁(yè)設(shè)計(jì)中，通過(guò)改變圖像顯示的尺寸，在保持所有顯示屏上圖像尺寸相同的情況下，讓使用Retina顯示屏的用戶(hù)看到更高清的圖像。

【實(shí)現(xiàn)方法】：調(diào)整img的height和width屬性均為原圖像的1/2，由于圖像的高度和寬度比例保持不變，圖像不會(huì)失真。注意，由于圖像源是同一個(gè)文件，加載時(shí)間沒(méi)有變化。

【示例】假設(shè)在網(wǎng)頁(yè)中插入一個(gè)40px×30px尺寸的圖像，也就是讓圖像在所有的顯示屏上都顯示為40px×30px，包括普通屏和Retina屏。那么，先創(chuàng)建80px×60px大小的圖像。然后，設(shè)計(jì)如下代碼。

    <img src="photo.jpg" width="40" height="30" alt="" />

瀏覽器將80px×60px的圖像縮小，以40px×30px的尺寸顯示。對(duì)于80px×60px的圖像來(lái)說(shuō)，總數(shù)為4800px，普通屏?xí)@示為1200px，Retina屏就可以顯示為4800px，讓圖像看起來(lái)更清晰。

如果設(shè)計(jì)40px×30px的圖像，Retina屏就會(huì)拉伸圖像，使用1200px填充4800px的空間，就會(huì)導(dǎo)致圖像清晰度降低。

提示：圖標(biāo)字體與SVG圖像文件格式在縮放時(shí)不會(huì)導(dǎo)致失真。對(duì)于單色的圖標(biāo)，建議盡可能地使用圖標(biāo)字體，而非使用圖像。對(duì)于標(biāo)識(shí)和其他非照片類(lèi)圖像，可以考慮使用SVG格式。

2.6、使用picture元素

<picture>標(biāo)簽僅作為容器，可以包含一個(gè)或多個(gè)<source>子標(biāo)簽。<source>可以加載多媒體源，它包含如下屬性：

• srcset：必需，設(shè)置圖片文件路徑，如srcset=“img/minpic.png”?；蛘呤怯啥禾?hào)分隔的用像素密度描述的圖片路徑，如srcset=“img/minpic.png,img/maxpic.png 2x”。
• media：設(shè)置媒體查詢(xún)，如media=" (min-width: 320px)"。
• sizes：設(shè)置寬度，如sizes=“100vw”?；蛘呤敲襟w查詢(xún)寬度，如sizes=“(min-width: 320px) 100vw”。也可以是逗號(hào)分隔的媒體查詢(xún)寬度列表，如sizes="(min-width: 320px)100vw, (min-width:640px) 50vw, calc(33vw – 100px) "。
• type：設(shè)置MIME類(lèi)型，如type= "image/webp"或者type= "image/vnd.ms-photo "。

瀏覽器將根據(jù)source的列表順序，使用第一個(gè)合適的source元素，并根據(jù)設(shè)置屬性，加載具體的圖片源，同時(shí)忽略后面的<source>標(biāo)簽。

【示例】使用picture元素設(shè)計(jì)在不同視圖下加載不同的圖片，演示效果如下圖所示：

    <picture>
        <source media="(min-width: 650px)" srcset="images/kitten-large.png">
        <source media="(min-width: 465px)" srcset="images/kitten-medium.png">
        <!-- img標(biāo)簽用于不支持picture元素的瀏覽器 -->
        <img src="images/kitten-small.png" alt="a cute kitten" id="picimg">
    </picture>

2.7、設(shè)計(jì)橫屏和豎屏顯示

本例以屏幕的方向作為條件，當(dāng)屏幕方向?yàn)闄M屏?xí)r加載kitten-large.png圖片，當(dāng)屏幕方向?yàn)樨Q屏?xí)r加載kitten-medium.png圖片。

    <picture>
        <source media="(orientation: portrait)" srcset="images/kitten-medium.png">
        <source media="(orientation: landscape)" srcset="images/kitten-large.png">
        <!-- img標(biāo)簽用于不支持picture元素的瀏覽器 -->
        <img src="images/kitten-small.png" alt="a cute kitten" id="picimg">

提示：可以結(jié)合多種條件，例如屏幕方向和視圖大小，分別加載不同的圖片，代碼如下：

    <picture>
        <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset=" images/minpic_
landscape.png">
        <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset=" images/minpic_
portrait.png">
        <source media="(min-width: 640px) and (orientation: landscape)" srcset=" images/middlepic_landscape.png">
        <source media="(min-width: 640px) and (orientation: portrait)" srcset="images/middlepic_portrait.png">
        <img src="images/picture.png" alt=" this is a picture ">
    </picture>

2.8、根據(jù)分辨率顯示不同圖像

本例以屏幕像素密度作為條件，設(shè)計(jì)當(dāng)像素密度為2 x時(shí)，加載后綴為_(kāi)retina.png的圖片，當(dāng)像素密度為1 x時(shí)加載無(wú)retina后綴的圖片。

    <picture>
        <source media="(min-width: 320px) and (max-width: 640px)" srcset="images/minpic_retina.png 2x">
        <source media="(min-width: 640px)" srcset="img/middle.png,img/middle_retina.png 2x">
        <img src="img/picture.png,img/picture_retina.png 2x" alt="this is a picture">
    </picture>

提示：有關(guān)srcset屬性的詳細(xì)說(shuō)明請(qǐng)參考下面的介紹。

2.9、根據(jù)格式顯示不同圖像

本例以圖片的文件格式作為條件。當(dāng)支持webp格式圖片時(shí)，加載webp格式圖片；當(dāng)不支持webp格式圖片時(shí)，加載png格式圖片。

    <picture>
        <source type="image/webp" srcset="images/picture.webp">
        <img src="images/picture.png" alt=" this is a picture ">
    </picture>

2.10、自適應(yīng)像素比

除了source元素外，HTML5為img元素新增了srcset屬性。srcset屬性是一個(gè)包含一個(gè)或多個(gè)源圖的集合，不同源圖用逗號(hào)分隔，每一個(gè)源圖由以下兩部分組成：

1. 圖像URL。
2. x（圖像像素比描述）或w（圖像像素寬度描述）的描述符。描述符需要與圖像URL以一個(gè)空格進(jìn)行分隔，w描述符的加載策略是通過(guò)sizes屬性里的聲明計(jì)算選擇的。

如果沒(méi)有設(shè)置第二部分，則默認(rèn)為1 x。在同一個(gè)srcset里，不能混用x描述符和w描述符，也不能在同一個(gè)圖像中既使用x描述符，又使用w描述符。

sizes屬性的寫(xiě)法與srcset相同，也是用逗號(hào)分隔的一個(gè)或多個(gè)字符串，每個(gè)字符串由以下兩部分組成：
（1）媒體查詢(xún)。最后一個(gè)字符串不能設(shè)置媒體查詢(xún)，作為匹配失敗后回退選項(xiàng)。

（2）圖像size（大?。┬畔?。注意，不能使用%描述圖像大小，如果想用百分比表示，應(yīng)使用類(lèi)似于vm（100 vm = 100%設(shè)備寬度）的單位描述，其他（如px、em等）的可以正常使用。

sizes給出的不同媒體查詢(xún)選擇圖像大小的建議，只對(duì)w描述符起作用。也就是說(shuō)，如果srcset用的是x描述符，或根本沒(méi)有定義srcset，則sizes是沒(méi)有意義的。

注意：除了IE瀏覽器不兼容外，其他瀏覽器全部支持該技術(shù)，詳細(xì)信息可以訪(fǎng)問(wèn)http://caniuse.com/#search=srcset。

【示例】設(shè)計(jì)屏幕5像素比（如高清2k屏）的設(shè)備使用2500px×2500px的圖片，3像素比的設(shè)備使用1500px×1500px的圖片，2像素比的設(shè)備使用1000px×1000px的圖片，1像素比（如普通筆記本顯示屏）的設(shè)備使用500px×500px的圖片。對(duì)于不支持srcset的瀏覽器，顯示src的圖片。

第1步，設(shè)計(jì)之前，先準(zhǔn)備5張圖片。

• 500.png：大小等于500px×500px。
• 1000.png：大小等于1000px×1000px。
• 1500.png：大小等于1500px×1500px。
• 2000.png：大小等于2000px×2000px。
• 2500.png：大小等于2500px×2500px。

第2步，新建HTML5文檔，輸入以下代碼，然后在不同屏幕比的設(shè)備上進(jìn)行測(cè)試。

    <img width="500" srcset="
            images/2500.png 5x,
            images/1500.png 3x,
            images/1000.png 2x,
            images/500.png 1x "
        src="images/500.png"
    />

對(duì)于srcset沒(méi)有給出像素比的設(shè)備，不同瀏覽器的選擇策略不同。例如，沒(méi)有給出1.5像素比的設(shè)備要使用哪張圖片，瀏覽器可以選擇2像素比的圖片，也可以選擇1像素比的圖片。

2.11、自適應(yīng)圖寬

w描述符可以簡(jiǎn)單地理解為描述源圖的像素大小，無(wú)關(guān)寬度還是高度，在大部分情況下可以理解為寬度。如果沒(méi)有設(shè)置sizes，一般是按照100 vm選擇加載圖片的。

**【示例1】**如果視口在500px及以下時(shí)，使用500 w的圖片；如果視口在1000px及以下時(shí)，使用1000 w的圖片，以此類(lèi)推。如果在媒體查詢(xún)都滿(mǎn)足的情況下，使用2000 w的圖片。實(shí)現(xiàn)代碼如下所示。

    <img width="500" srcset="
            images/2000.png 2000w,
            images/1500.png 1500w,
            images/1000.png 1000w,
            images/500.png 500w
            "
        sizes="
            (max-width: 500px) 500px,
            (max-width: 1000px) 1000px,
            (max-width: 1500px) 1500px,
            2000px "
        src="images/500.png"
    />

如果沒(méi)有對(duì)應(yīng)的w描述符，一般選擇第一個(gè)大于它的。如果有一個(gè)媒體查詢(xún)是700px，一般加載1000 w對(duì)應(yīng)的源圖。

【示例2】使用百分比設(shè)置視口寬度。

    <img width="500" srcset="
            images/2000.png 2000w,
            images/1500.png 1500w,
            images/1000.png 1000w,
            images/500.png 500w
            "
        sizes="
            (max-width: 500px) 100vm,
            (max-width: 1000px) 80vm,
            (max-width: 1500px) 50vm,
            2000px "
        src="images/500.png"
    />

這里設(shè)計(jì)圖片的選擇：視口寬度乘以1、0.8或0.5，根據(jù)得到的像素選擇不同的w描述符。例如，如果viewport為800px，對(duì)應(yīng)80 vm，就是800px×0.8=640px，應(yīng)該加載一個(gè)640 w的源圖，但是srcset中沒(méi)有640 w，這時(shí)會(huì)選擇第一個(gè)大于640 w的源圖，也就是1000 w的源圖。如果沒(méi)有設(shè)置，一般是按照100vm選擇加載圖片的。

3、設(shè)計(jì)多媒體

在HTML5之前，可以通過(guò)第三方插件為網(wǎng)頁(yè)添加音頻和視頻，但這樣做有一些問(wèn)題：在某個(gè)瀏覽器中嵌入Flash視頻的代碼，在另一個(gè)瀏覽器中可能不起作用，也沒(méi)有優(yōu)雅的兼容方式。同時(shí)，像Flash這樣的插件會(huì)占用大量的計(jì)算資源，會(huì)使瀏覽器的反應(yīng)變慢，從而影響用戶(hù)體驗(yàn)。

3.1、使用embed元素

<embed>標(biāo)簽可以定義嵌入插件，以便播放多媒體信息。它的用法如下。

    <embed src="helloworld.swf" />

src屬性必須設(shè)置，用來(lái)指定媒體源。標(biāo)簽包含的屬性說(shuō)明如下表所示：

【示例1】設(shè)計(jì)背景音樂(lè)。備用練習(xí)文檔test1.html，另存為test2.html。在標(biāo)簽內(nèi)輸入下面的代碼。

    <embed src="images/bg.mp3" width="307" height="32" hidden="true" autostart="true" loop="infinite"></embed>

指定背景音樂(lè)為"images/bg.mp3"，通過(guò)hidden="true"屬性隱藏插件，使用autostart="true"屬性設(shè)置背景音樂(lè)自動(dòng)播放，使用loop="infinite"屬性設(shè)置背景音樂(lè)循環(huán)播放。設(shè)置屬性完畢，在瀏覽器中瀏覽，這時(shí)就可以邊瀏覽網(wǎng)頁(yè)邊聽(tīng)著背景音樂(lè)。

提示：要正確使用標(biāo)簽，需要瀏覽器支持對(duì)應(yīng)的插件。

【示例2】可以播放視頻。新建test3.html，在標(biāo)簽內(nèi)輸入下面的代碼。

    <embed src="images/vid2.avi" width="413" height="292"></embed>

使用width和height屬性設(shè)置視頻播放窗口的大小，在瀏覽器中效果如下圖所示：

3.2、使用object元素

使用<object>標(biāo)簽可以定義一個(gè)嵌入對(duì)象，主要用于在網(wǎng)頁(yè)中插入多媒體信息，如圖像、音頻、視頻、Java applets、ActiveX、PDF和Flash。

<object>標(biāo)簽包含大量屬性，說(shuō)明如下表所示：

【示例1】下面代碼使用<object>標(biāo)簽在頁(yè)面中嵌入一幅圖片，效果如下圖所示：

    <object width="100%" type="image/jpg" data="images/1.jpg"></object>

【示例2】下面代碼使用<object>標(biāo)簽在頁(yè)面中嵌入網(wǎng)頁(yè)，效果如下圖所示：

    <object type="text/html" height="100%" width="100%" data="https://www.baidu.com/"></object>

【示例3】下面代碼使用<object>標(biāo)簽在頁(yè)面中嵌入音頻。

    <object width="100%"  classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
        <param name="AutoStart" value="1" />
        <param name="FileName" value="images/bg.mp3" />
    </object>

提示：<param>標(biāo)簽必須包含在<object>標(biāo)簽內(nèi)，用來(lái)定義嵌入對(duì)象的配置參數(shù)，通過(guò)名/值對(duì)屬性進(jìn)行設(shè)置，name屬性設(shè)置配置項(xiàng)目，value屬性設(shè)置項(xiàng)目值。

object的功能很強(qiáng)大，初衷是取代img和applet元素。不過(guò)，由于漏洞以及缺乏瀏覽器的支持，并未完全實(shí)現(xiàn)，同時(shí)主流瀏覽器都使用不同的代碼加載相同的對(duì)象。如果瀏覽器不能顯示object元素，就會(huì)執(zhí)行位于<object>和</object>之間的代碼，通過(guò)這種方式，我們針對(duì)不同的瀏覽器嵌套多個(gè)object元素，或者嵌套embed、img等元素。

4、使用HTML5多媒體

HTML5添加了原生的多媒體。這樣做有很多好處：速度更快（任何瀏覽器原生的功能勢(shì)必比插件要快一些）；媒體播放按鈕和其他控件內(nèi)置到瀏覽器，極大地降低了對(duì)插件的依賴(lài)性。

現(xiàn)代瀏覽器都支持HTML5的audio元素和video元素，如IE 9.0+、Firefox 3.5+、Opera 10.5+、Chrome 3.0+、Safari 3.2+等。

4.1、使用audio元素

<audio>標(biāo)簽可以播放聲音文件或音頻流，支持Ogg Vorbis、MP3、Wav等音頻格式，其用法如下：

    <audio src="samplesong.mp3" controls="controls"></audio>

其中，src屬性用于指定要播放的聲音文件，controls屬性用于設(shè)置是否顯示工具條。標(biāo)簽可用的屬性如下表所示：

提示：如果瀏覽器不支持標(biāo)簽，可以在與標(biāo)識(shí)符之間嵌入替換的HTML字符串，這樣舊的瀏覽器就可以顯示這些信息。例如：

    <audio src=" test.mp3" controls="controls">
    您的瀏覽器不支持audio標(biāo)簽。
    </audio>

替換內(nèi)容可以是簡(jiǎn)單的提示信息，也可以是一些備用音頻插件，或者是音頻文件的鏈接等。

【示例1】標(biāo)簽可以包裹多個(gè)標(biāo)簽，用來(lái)導(dǎo)入不同的音頻文件，瀏覽器會(huì)自動(dòng)選擇第一個(gè)可以識(shí)別的格式進(jìn)行播放。

    <audio controls>
        <source src="medias/test.ogg" type="audio/ogg">
        <source src="medias/test.mp3" type="audio/mpeg">
        <p>你的瀏覽器不支持HTML5 audio，你可以 <a href="piano.mp3">下載音頻文件</a> (MP3, 1.3 MB)</p>
    </audio>

以上代碼在Chrome瀏覽器中的運(yùn)行結(jié)果如圖4.8所示。這個(gè)audio元素（含默認(rèn)控件集）定義了兩個(gè)音頻源文件，一個(gè)編碼為Ogg，另一個(gè)編碼為MP3。完整的過(guò)程同指定多個(gè)視頻源文件的過(guò)程是一樣的。瀏覽器會(huì)忽略它不能播放的文件，僅播放它能播放的文件。

支持Ogg的瀏覽器（如Firefox）會(huì)加載piano.ogg。Chrome同時(shí)理解Ogg和MP3，但是會(huì)加載Ogg文件，因?yàn)樵赼udio元素的代碼中，Ogg文件位于MP3文件之前。不支持Ogg格式，但支持MP3格式的瀏覽器(IE10)會(huì)加載test.mp3，舊瀏覽器（如IE8）會(huì)顯示備用信息。

【補(bǔ)充】：
<source>標(biāo)簽可以為<video>和<audio>標(biāo)簽定義多媒體資源，它必須包裹在<video>或<audio>標(biāo)識(shí)符內(nèi)。<source>標(biāo)簽包含以下3個(gè)可用屬性。

• media：定義媒體資源的類(lèi)型。
• src：定義媒體文件的URL。
• type：定義媒體資源的MIME類(lèi)型。如果媒體類(lèi)型與源文件不匹配，瀏覽器可能會(huì)拒絕播放。可以省略type屬性，讓瀏覽器自動(dòng)檢測(cè)編碼方式。

為了兼容不同瀏覽器，一般使用多個(gè)<source>標(biāo)簽包含多種媒體資源。對(duì)于數(shù)據(jù)源，瀏覽器會(huì)按照聲明順序進(jìn)行選擇，如果支持的不止一種，那么瀏覽器會(huì)優(yōu)先播放位置靠前的媒體資源。數(shù)據(jù)源列表應(yīng)按照用戶(hù)體驗(yàn)由高到低排序，或者按照服務(wù)器消耗由低到高列出。

【示例2】演示在頁(yè)面中插入背景音樂(lè)，在<audio>標(biāo)簽中設(shè)置autoplay和loop屬性，詳細(xì)代碼如下所示。

    <audio autoplay loop>
        <source src="medias/test.ogg" type="audio/ogg">
        <source src="medias/test.mp3" type="audio/mpeg">
    您的瀏覽器不支持audio標(biāo)簽。
    </audio>

4.2、使用video元素

<video>標(biāo)簽可以播放視頻文件或視頻流，支持Ogg、MPEG 4、WebM等視頻格式，其用法如下：

    <video src="samplemovie.mp4" controls="controls"></video>

其中，src屬性用于指定要播放的視頻文件，controls屬性用于提供播放、暫停和音量控件。<video>標(biāo)簽可用的屬性如下表所示：

【補(bǔ)充】：HTML5的標(biāo)簽支持以下3種常用的視頻格式，簡(jiǎn)單說(shuō)明如下：

• Ogg：帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。
• MPEG4：帶有H.264視頻編碼和AAC音頻編碼的MPEG 4文件。
• WebM：帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。

提示：如果瀏覽器不支持<video>標(biāo)簽，可以在<video>與</video>標(biāo)識(shí)符之間嵌入替換的HTML字符串，這樣舊的瀏覽器就可以顯示這些信息。例如：

    <video src=" test.mp4" controls="controls">
    您的瀏覽器不支持video標(biāo)簽。
    </video>

【示例1】使用<video>標(biāo)簽在頁(yè)面中嵌入一段視頻，然后使用<source>標(biāo)簽鏈接不同的視頻文件，瀏覽器會(huì)自己選擇第一個(gè)可以識(shí)別的格式。

    <video controls>
        <source src="medias/trailer.ogg" type="video/ogg">
        <source src="medias/trailer.mp4" type="video/mp4">
    您的瀏覽器不支持video標(biāo)簽。
    </video >

一個(gè)video元素中可以包含任意數(shù)量的source元素，因此為視頻定義兩種不同的格式是相當(dāng)容易的。瀏覽器會(huì)加載第一個(gè)它支持的source元素引用的文件格式，并忽略其他的來(lái)源。

將以上代碼在Chrome瀏覽器中運(yùn)行，當(dāng)鼠標(biāo)經(jīng)過(guò)播放畫(huà)面時(shí)，可以看到出現(xiàn)一個(gè)比較簡(jiǎn)單的視頻播放控制條，包含播放、暫停、位置、時(shí)間顯示、音量控制等控件，如下圖所示：

當(dāng)為<video>標(biāo)簽設(shè)置controls屬性時(shí)，可以在頁(yè)面上以默認(rèn)方式進(jìn)行播放控制。如果不設(shè)置controls屬性，那么在播放的時(shí)候就不會(huì)顯示控制條界面。

【示例2】通過(guò)設(shè)置autoplay屬性，不需要播放控制條，音頻或視頻文件就會(huì)在加載完成后自動(dòng)播放。

    <video autoplay>
        <source src="medias/trailer.ogg" type="video/ogg">
        <source src="medias/trailer.mp4" type="video/mp4">
    您的瀏覽器不支持video標(biāo)簽。
    </video >

也可以使用JavaScript腳本控制媒體播放，簡(jiǎn)單說(shuō)明如下：

• load()：可以加載音頻或視頻文件。
• play()：可以加載并播放音頻或視頻文件，除非已經(jīng)暫停，否則默認(rèn)從開(kāi)頭播放。
• pause()：暫停處于播放狀態(tài)的音頻或視頻文件。
• canPlayType(type)：檢測(cè)video元素是否支持給定MIME類(lèi)型的文件。

【示例3】演示通過(guò)移動(dòng)鼠標(biāo)觸發(fā)視頻的play和pause功能。設(shè)計(jì)當(dāng)用戶(hù)移動(dòng)鼠標(biāo)到視頻界面上時(shí)，播放視頻，如果移出鼠標(biāo)，則暫停視頻播放。

    <video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"
        width="400px" height="300px">
        <source src="medias/trailer.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="medias/trailer.mp4" type='video/mp4'>
    </video>

上面代碼在瀏覽器中預(yù)覽，顯示效果如下圖所示：

提示：要實(shí)現(xiàn)循環(huán)播放，只需要使用autoplay和loop屬性。如果不設(shè)置autoplay屬性，通常瀏覽器會(huì)在視頻加載時(shí)顯示視頻的第一幀，用戶(hù)可能想對(duì)此做出修改，指定自己的圖像，這可以通過(guò)海報(bào)圖像實(shí)現(xiàn)。

例如，下面代碼設(shè)置自動(dòng)播放和循環(huán)播放的單個(gè)WebM視頻。如果不設(shè)置controls，訪(fǎng)問(wèn)者就無(wú)法停止視頻。因此，如果將視頻指定為循環(huán)，最好包含controls。

    <video src="paddle-steamer.webm" width="369" height="208" autoplay loop></video>

下面代碼指定了海報(bào)圖像（當(dāng)頁(yè)面加載并顯示視頻時(shí)顯示該圖像）的單個(gè)WebM視頻（含控件）。

    <video src="paddle-steamer.webm" width="369" height="208" poster="paddle-steamer-poster.jpg" controls></video>

其中，paddle-steamer.webm指向你的視頻文件，paddle-steamer-poster.jpg是想用作海報(bào)圖像的圖像。

如果用戶(hù)觀(guān)看視頻的可能性較低（如該視頻并不是頁(yè)面的主要內(nèi)容），那么可以告訴瀏覽器不要預(yù)先加載該視頻。對(duì)于設(shè)置了preload="none"的視頻，在初始化視頻之前，瀏覽器顯示視頻的方式并不一樣。

    <video src="paddle-steamer.webm" preload="none" controls></video>

上面代碼說(shuō)明在頁(yè)面完全加載時(shí)也不會(huì)加載單個(gè)WebM視頻，僅在用戶(hù)試著播放該視頻時(shí)才會(huì)加載它。注意這里省略了width和height屬性。

將preload設(shè)為none的視頻，在Firefox中什么也不會(huì)顯示，因?yàn)闉g覽器沒(méi)有得到關(guān)于該視頻的任何信息（連尺寸都不知道），也沒(méi)有指定海報(bào)圖像。如果用戶(hù)播放該視頻，則瀏覽器會(huì)獲取該視頻的尺寸，并調(diào)整視頻大小。

Chrome在控制組件上面顯示一個(gè)空白的矩形。這時(shí)，控制組件的大小比訪(fǎng)問(wèn)者播放視頻時(shí)顯示的組件要窄一些。

preload的默認(rèn)值是auto，這會(huì)讓瀏覽器具有用戶(hù)將要播放該視頻的預(yù)期，從而做好準(zhǔn)備，讓視頻可以很快進(jìn)入播放狀態(tài)。由于瀏覽器會(huì)預(yù)先加載大部分視頻甚至整個(gè)視頻，所以在視頻播放的過(guò)程中對(duì)其進(jìn)行多次開(kāi)始、暫停的操作會(huì)變得更不容易，因?yàn)闉g覽器總是試著下載較多的數(shù)據(jù)讓訪(fǎng)問(wèn)者觀(guān)看。

在none和auto之間有一個(gè)不錯(cuò)的中間值，即preload=“metadata”。這樣設(shè)置會(huì)讓瀏覽器僅獲取視頻的基本信息，如尺寸、時(shí)長(zhǎng)，甚至一些關(guān)鍵幀。在開(kāi)始播放之前，瀏覽器不會(huì)顯示白色的矩形，而且視頻的尺寸也會(huì)與實(shí)際尺寸一致。

使用metadata會(huì)告訴瀏覽器，用戶(hù)的連接速度并不快，因此需要在不妨礙播放的情況下盡可能地保留帶寬資源。

注意：如果要獲得所有兼容HTML5的瀏覽器的支持，至少需要提供兩種格式的視頻：MP4和WebM。這時(shí)須用到HTML5的source元素。通常，source元素用于定義一個(gè)以上的媒體元素的來(lái)源。例如，下面代碼為視頻定義了兩個(gè)源：MP4文件和WebM文件。

    <video width="369" height="208" controls>
        <source src="paddle-steamer.mp4" type="video/mp4">
        <source src="paddle-steamer.webm" type="video/webm">
        <p><a href="paddle-steamer.mp4">下載視頻</a></p>
    </video>

【補(bǔ)充】:利用現(xiàn)代瀏覽器提供的原生可訪(fǎng)問(wèn)性支持，原生多媒體可以更好地使用鍵盤(pán)進(jìn)行控制，這是原生多媒體的另一個(gè)好處。HTML5視頻和音頻的鍵盤(pán)可訪(fǎng)問(wèn)性支持在Firefox、IE和Opera瀏覽器中表現(xiàn)良好。不過(guò)，對(duì)于Chrome和Safari瀏覽器，實(shí)現(xiàn)鍵盤(pán)可訪(fǎng)問(wèn)性的唯一辦法是自制播放控件。為此，需要使用JavaScript Media API（這也是HTML5的一部分）。

HTML5指定了一種新的文件格式WebVTT（Web Video Text Track，Web視頻文本軌道）用于包含文本字幕、標(biāo)題、描述、篇章等視頻內(nèi)容。更多信息可以參見(jiàn)www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles，其中包括為了對(duì)接規(guī)范，修改在2012年進(jìn)行的更新。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-652530.html

到了這里，關(guān)于設(shè)計(jì)HTML5圖像和多媒體的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！