在網頁中的文本信息直觀、明了，而多媒體信息更富內涵和視覺沖擊力。恰當使用不同類型的多媒體可以展示個性，突出重點，吸引用戶。在HTML5之前，需要借助插件為網頁添加多媒體，如Adobe Flash Player、蘋果的QuickTime等。HTML5引入原生的多媒體技術，設計多媒體更簡便，用戶體驗更好。

1、認識HTML5圖像

圖像與文本一樣都是重要的網頁對象，適當插入圖像可以豐富網頁信息，增強頁面的可欣賞性。圖像本身具有很強的視覺沖擊力，可以吸引瀏覽者的眼球，制作精巧、設計合理的圖像能激發瀏覽者瀏覽網頁的興趣。

在網頁中使用的圖像類型包括3種：GIF、JPEG和PNG。

1.1、GIF圖像

無損壓縮，不降低圖像的品質，而是減少顯示色，最多可以顯示256色。
支持透明背景。
可以設計GIF動畫。

1.2、JPEG圖像

有損壓縮，在壓縮過程中，圖像的某些細節將被忽略，但一般的瀏覽者看不出來。
支持1670萬種顏色，可以很好地再現色彩豐富的攝影圖像。
不支持透明背景和交錯顯示功能。

1.3、PNG圖像

PNG具有GIF圖像和JPEG圖像的雙重優點。一方面，它可以無損壓縮文件，壓縮技術比GIF好；另一方面，它支持的顏色數量達到1670萬種，同時支持索引色、灰度、真彩色以及Alpha通道透明等功能。

在網頁設計中，如果圖像顏色少于256色，推薦使用GIF格式，如logo等；如果顏色較豐富，建議選用JPEG或PNG格式，如新聞照片等。

2、設計圖像

HTML 5.1新增picture元素和img元素的srcset、sizes屬性，使得響應式圖片的實現更為簡單便捷，很多主流瀏覽器的新版本也對這些新增加的內容支持良好。

2.1、使用img元素

在HTML5中，使用標簽可以把圖像插入網頁中，具體用法如下。

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

img元素向網頁中嵌入一幅圖像，從技術上分析，<img>標簽并不會在網頁中插入圖像，而是從網頁上鏈接圖像，<img>標簽創建的是被引用圖像的占位空間。

提示：標簽有兩個必需的屬性：alt屬性和src屬性。具體說明如下：

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

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

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

在這里插入圖片描述
HTML5為標簽定義了多個可選屬性，簡單說明如下:

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

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

2.2、定義流內容

流內容是由頁面上的文本引述出來的。在HTML5出現之前，沒有專門實現這個目的的元素，因此一些開發人員使用沒有語義的div元素表示。通過引入figure和figcaption元素，HTML5改變了這種情況。

流內容可以是圖表、照片、圖形、插圖、代碼片段，以及其他類似的獨立內容。可以由頁面上的其他內容引出figure。figcaption是figure的標題，可選，出現在figure內容的開頭或結尾處。例如：

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

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

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

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

在這里插入圖片描述
figure元素可以包含多個內容塊。不過，不管figure包含多少內容，只允許有一個figcaption。

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

可選的figcaption必須與其他內容一起包含在figure里面，不能單獨出現在其他位置。figcaption中的文本是對內容的一句簡短描述即可，就像照片的描述文本。

在默認情況下，現代瀏覽器會為figure添加寬40px的左右外邊距。可以使用CSS的margin-left和margin-right屬性修改這一樣式。例如，使用margin-left:0;讓圖像直接抵到頁面左邊緣。還可以使用figure { float: left; }讓包含figure的文本環繞在它周圍，這樣文本就會圍繞在圖像的右側。可能還需要為figure設置width，使之不至于占據太大的水平空間。

2.3、插入圖標

網站圖標一般顯示在瀏覽器選項卡、歷史記錄、書簽、收藏夾或地址欄中。圖標大小一般為16px×16px，透明背景。移動設備iPhone圖標大小為57px×57px或114px×114px（Retina屏），iPad圖標大小為72px×72px或144px×144px（Retina屏）。Android系統支持該尺寸的圖標。

【示例】下面通過多步操作，演示如何在一個網站中插入圖標。

第1步，創建一個大小為16px×16px的圖像，保存為favicon.ico，注意擴展名為.ico。為Retina屏創建一個32px×32px的圖像。

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

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

第3步，將圖標圖像放在網站根目錄下。

第4步，新建HTML5文檔，在網頁頭部位置輸入下面的代碼：

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

第5步，瀏覽網頁，瀏覽器會自動在根目錄尋找特定的文件名，找到后就將圖標顯示出來。

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

2.4、定義替代文本

使用alt屬性可以為圖像添加一段描述性文本，當圖像由于某種原因不顯示的時候，就將這段文字顯示出來。屏幕閱讀器可以朗讀這些文本，以幫助視障訪問者理解圖像的內容。

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

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

在IE瀏覽器中，替代文本出現在一個帶叉的小方塊旁邊，且兩者由一個方框包圍。在Firefox和Opera等其他瀏覽器中，替代文本是單獨出現的。Chrome和Safari瀏覽器不會顯示alt文本，而是顯示缺失圖像的圖標。

提示：如果圖像對內容的價值較小，對視障用戶來說不太重要，則可以提供空的替代文本，即alt=“”。如果圖像與鄰近的文本表達的信息相似，也可以將alt屬性置空。

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

如果圖像是頁面設計的一部分，而不是內容的一部分，則考慮使用CSS的backgroundimage屬性引入該圖像，而不是使用img標記。

2.5、定義Retina顯示

Retina是一種顯示標準，就是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度，也稱為視網膜顯示屏。

在網頁設計中，通過改變圖像顯示的尺寸，在保持所有顯示屏上圖像尺寸相同的情況下，讓使用Retina顯示屏的用戶看到更高清的圖像。

【實現方法】：調整img的height和width屬性均為原圖像的1/2，由于圖像的高度和寬度比例保持不變，圖像不會失真。注意，由于圖像源是同一個文件，加載時間沒有變化。

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

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

瀏覽器將80px×60px的圖像縮小，以40px×30px的尺寸顯示。對于80px×60px的圖像來說，總數為4800px，普通屏會顯示為1200px，Retina屏就可以顯示為4800px，讓圖像看起來更清晰。

如果設計40px×30px的圖像，Retina屏就會拉伸圖像，使用1200px填充4800px的空間，就會導致圖像清晰度降低。

提示：圖標字體與SVG圖像文件格式在縮放時不會導致失真。對于單色的圖標，建議盡可能地使用圖標字體，而非使用圖像。對于標識和其他非照片類圖像，可以考慮使用SVG格式。

2.6、使用picture元素

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

srcset：必需，設置圖片文件路徑，如srcset=“img/minpic.png”。或者是由逗號分隔的用像素密度描述的圖片路徑，如srcset=“img/minpic.png,img/maxpic.png 2x”。
media：設置媒體查詢，如media=" (min-width: 320px)"。
sizes：設置寬度，如sizes=“100vw”。或者是媒體查詢寬度，如sizes=“(min-width: 320px) 100vw”。也可以是逗號分隔的媒體查詢寬度列表，如sizes="(min-width: 320px)100vw, (min-width:640px) 50vw, calc(33vw – 100px) "。
type：設置MIME類型，如type= "image/webp"或者type= "image/vnd.ms-photo "。

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

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

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

在這里插入圖片描述

2.7、設計橫屏和豎屏顯示

本例以屏幕的方向作為條件，當屏幕方向為橫屏時加載kitten-large.png圖片，當屏幕方向為豎屏時加載kitten-medium.png圖片。

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

在這里插入圖片描述
提示：可以結合多種條件，例如屏幕方向和視圖大小，分別加載不同的圖片，代碼如下：

    <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、根據分辨率顯示不同圖像

本例以屏幕像素密度作為條件，設計當像素密度為2 x時，加載后綴為_retina.png的圖片，當像素密度為1 x時加載無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>

提示：有關srcset屬性的詳細說明請參考下面的介紹。

2.9、根據格式顯示不同圖像

本例以圖片的文件格式作為條件。當支持webp格式圖片時，加載webp格式圖片；當不支持webp格式圖片時，加載png格式圖片。

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

2.10、自適應像素比

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

圖像URL。
x（圖像像素比描述）或w（圖像像素寬度描述）的描述符。描述符需要與圖像URL以一個空格進行分隔，w描述符的加載策略是通過sizes屬性里的聲明計算選擇的。

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

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

（2）圖像size（大小）信息。注意，不能使用%描述圖像大小，如果想用百分比表示，應使用類似于vm（100 vm = 100%設備寬度）的單位描述，其他（如px、em等）的可以正常使用。

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

注意：除了IE瀏覽器不兼容外，其他瀏覽器全部支持該技術，詳細信息可以訪問http://caniuse.com/#search=srcset。

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

第1步，設計之前，先準備5張圖片。

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

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

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

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

2.11、自適應圖寬

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

**【示例1】**如果視口在500px及以下時，使用500 w的圖片；如果視口在1000px及以下時，使用1000 w的圖片，以此類推。如果在媒體查詢都滿足的情況下，使用2000 w的圖片。實現代碼如下所示。

    <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"/>

如果沒有對應的w描述符，一般選擇第一個大于它的。如果有一個媒體查詢是700px，一般加載1000 w對應的源圖。

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

    <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"/>

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

3、設計多媒體

在HTML5之前，可以通過第三方插件為網頁添加音頻和視頻，但這樣做有一些問題：在某個瀏覽器中嵌入Flash視頻的代碼，在另一個瀏覽器中可能不起作用，也沒有優雅的兼容方式。同時，像Flash這樣的插件會占用大量的計算資源，會使瀏覽器的反應變慢，從而影響用戶體驗。

3.1、使用embed元素

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

    <embed src="helloworld.swf" />

src屬性必須設置，用來指定媒體源。標簽包含的屬性說明如下表所示：
在這里插入圖片描述
【示例1】設計背景音樂。備用練習文檔test1.html，另存為test2.html。在標簽內輸入下面的代碼。

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

指定背景音樂為"images/bg.mp3"，通過hidden="true"屬性隱藏插件，使用autostart="true"屬性設置背景音樂自動播放，使用loop="infinite"屬性設置背景音樂循環播放。設置屬性完畢，在瀏覽器中瀏覽，這時就可以邊瀏覽網頁邊聽著背景音樂。

提示：要正確使用標簽，需要瀏覽器支持對應的插件。

【示例2】可以播放視頻。新建test3.html，在標簽內輸入下面的代碼。

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

使用width和height屬性設置視頻播放窗口的大小，在瀏覽器中效果如下圖所示：
在這里插入圖片描述

3.2、使用object元素

使用<object>標簽可以定義一個嵌入對象，主要用于在網頁中插入多媒體信息，如圖像、音頻、視頻、Java applets、ActiveX、PDF和Flash。

<object>標簽包含大量屬性，說明如下表所示：
在這里插入圖片描述
【示例1】下面代碼使用<object>標簽在頁面中嵌入一幅圖片，效果如下圖所示：

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

在這里插入圖片描述
【示例2】下面代碼使用<object>標簽在頁面中嵌入網頁，效果如下圖所示：

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

在這里插入圖片描述

【示例3】下面代碼使用<object>標簽在頁面中嵌入音頻。

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

提示：<param>標簽必須包含在<object>標簽內，用來定義嵌入對象的配置參數，通過名/值對屬性進行設置，name屬性設置配置項目，value屬性設置項目值。

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

4、使用HTML5多媒體

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

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

4.1、使用audio元素

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

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

其中，src屬性用于指定要播放的聲音文件，controls屬性用于設置是否顯示工具條。標簽可用的屬性如下表所示：
在這里插入圖片描述
提示：如果瀏覽器不支持標簽，可以在與標識符之間嵌入替換的HTML字符串，這樣舊的瀏覽器就可以顯示這些信息。例如：

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

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

【示例1】標簽可以包裹多個標簽，用來導入不同的音頻文件，瀏覽器會自動選擇第一個可以識別的格式進行播放。

    <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瀏覽器中的運行結果如圖4.8所示。這個audio元素（含默認控件集）定義了兩個音頻源文件，一個編碼為Ogg，另一個編碼為MP3。完整的過程同指定多個視頻源文件的過程是一樣的。瀏覽器會忽略它不能播放的文件，僅播放它能播放的文件。

支持Ogg的瀏覽器（如Firefox）會加載piano.ogg。Chrome同時理解Ogg和MP3，但是會加載Ogg文件，因為在audio元素的代碼中，Ogg文件位于MP3文件之前。不支持Ogg格式，但支持MP3格式的瀏覽器(IE10)會加載test.mp3，舊瀏覽器（如IE8）會顯示備用信息。
在這里插入圖片描述
【補充】：
<source>標簽可以為<video>和<audio>標簽定義多媒體資源，它必須包裹在<video>或<audio>標識符內。<source>標簽包含以下3個可用屬性。

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

為了兼容不同瀏覽器，一般使用多個<source>標簽包含多種媒體資源。對于數據源，瀏覽器會按照聲明順序進行選擇，如果支持的不止一種，那么瀏覽器會優先播放位置靠前的媒體資源。數據源列表應按照用戶體驗由高到低排序，或者按照服務器消耗由低到高列出。

【示例2】演示在頁面中插入背景音樂，在<audio>標簽中設置autoplay和loop屬性，詳細代碼如下所示。

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

4.2、使用video元素

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

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

其中，src屬性用于指定要播放的視頻文件，controls屬性用于提供播放、暫停和音量控件。<video>標簽可用的屬性如下表所示：
在這里插入圖片描述
【補充】：HTML5的標簽支持以下3種常用的視頻格式，簡單說明如下：

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

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

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

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

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

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

將以上代碼在Chrome瀏覽器中運行，當鼠標經過播放畫面時，可以看到出現一個比較簡單的視頻播放控制條，包含播放、暫停、位置、時間顯示、音量控制等控件，如下圖所示：
在這里插入圖片描述
當為<video>標簽設置controls屬性時，可以在頁面上以默認方式進行播放控制。如果不設置controls屬性，那么在播放的時候就不會顯示控制條界面。

【示例2】通過設置autoplay屬性，不需要播放控制條，音頻或視頻文件就會在加載完成后自動播放。

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

也可以使用JavaScript腳本控制媒體播放，簡單說明如下：

load()：可以加載音頻或視頻文件。
play()：可以加載并播放音頻或視頻文件，除非已經暫停，否則默認從開頭播放。
pause()：暫停處于播放狀態的音頻或視頻文件。
canPlayType(type)：檢測video元素是否支持給定MIME類型的文件。

【示例3】演示通過移動鼠標觸發視頻的play和pause功能。設計當用戶移動鼠標到視頻界面上時，播放視頻，如果移出鼠標，則暫停視頻播放。

    <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>

上面代碼在瀏覽器中預覽，顯示效果如下圖所示：
在這里插入圖片描述
提示：要實現循環播放，只需要使用autoplay和loop屬性。如果不設置autoplay屬性，通常瀏覽器會在視頻加載時顯示視頻的第一幀，用戶可能想對此做出修改，指定自己的圖像，這可以通過海報圖像實現。

例如，下面代碼設置自動播放和循環播放的單個WebM視頻。如果不設置controls，訪問者就無法停止視頻。因此，如果將視頻指定為循環，最好包含controls。

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

下面代碼指定了海報圖像（當頁面加載并顯示視頻時顯示該圖像）的單個WebM視頻（含控件）。

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

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

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

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

上面代碼說明在頁面完全加載時也不會加載單個WebM視頻，僅在用戶試著播放該視頻時才會加載它。注意這里省略了width和height屬性。

將preload設為none的視頻，在Firefox中什么也不會顯示，因為瀏覽器沒有得到關于該視頻的任何信息（連尺寸都不知道），也沒有指定海報圖像。如果用戶播放該視頻，則瀏覽器會獲取該視頻的尺寸，并調整視頻大小。

Chrome在控制組件上面顯示一個空白的矩形。這時，控制組件的大小比訪問者播放視頻時顯示的組件要窄一些。

preload的默認值是auto，這會讓瀏覽器具有用戶將要播放該視頻的預期，從而做好準備，讓視頻可以很快進入播放狀態。由于瀏覽器會預先加載大部分視頻甚至整個視頻，所以在視頻播放的過程中對其進行多次開始、暫停的操作會變得更不容易，因為瀏覽器總是試著下載較多的數據讓訪問者觀看。

在none和auto之間有一個不錯的中間值，即preload=“metadata”。這樣設置會讓瀏覽器僅獲取視頻的基本信息，如尺寸、時長，甚至一些關鍵幀。在開始播放之前，瀏覽器不會顯示白色的矩形，而且視頻的尺寸也會與實際尺寸一致。

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

注意：如果要獲得所有兼容HTML5的瀏覽器的支持，至少需要提供兩種格式的視頻：MP4和WebM。這時須用到HTML5的source元素。通常，source元素用于定義一個以上的媒體元素的來源。例如，下面代碼為視頻定義了兩個源：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>

【補充】:利用現代瀏覽器提供的原生可訪問性支持，原生多媒體可以更好地使用鍵盤進行控制，這是原生多媒體的另一個好處。HTML5視頻和音頻的鍵盤可訪問性支持在Firefox、IE和Opera瀏覽器中表現良好。不過，對于Chrome和Safari瀏覽器，實現鍵盤可訪問性的唯一辦法是自制播放控件。為此，需要使用JavaScript Media API（這也是HTML5的一部分）。

HTML5指定了一種新的文件格式WebVTT（Web Video Text Track，Web視頻文本軌道）用于包含文本字幕、標題、描述、篇章等視頻內容。更多信息可以參見www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles，其中包括為了對接規范，修改在2012年進行的更新。