HTML5多媒體

HTML5圖像

<img>标簽（空元素）

   屬性：

• alt               text      必需，圖像的替換文本
• src              URL     必需，圖像的URL
• height 
• width
• usemap       URL    将圖像定義為用戶端圖像映射   

*由于圖像是獨立檔案存在的，如果某個HTML5檔案包含10個圖像，要正确顯示這個頁面需要加載11個檔案，HTTP協定需要11次請求才能完成。

web使用的主要圖像有GIF、JPEG和PNG。

<map>和<area>标簽

   map定義帶有可單擊區域的圖像映射，area定義圖像地圖中的可單擊區域

<map>和<area>标簽用于建立圖像地圖。圖像地圖是指已被分為多個區域的圖像，這些區域成為熱點，可以建立多個熱點，熱點支援超連結。

<map>元素必需使用name屬性定義image-map名稱，name屬性與<img>标簽的usemap屬性相關聯，建立圖像與映射之間的關系

<map>元素包含<area>元素，定義圖像映射的可單擊區域。

area屬性：

• coords          x1,y1,x2,y2      該值規定矩形左上角和右下角的坐标（shape屬性為rect）
•                       x,y,radius        該值規定圓心的坐标和半徑（shape屬性為circle）
•                      x1,y1,x2,y2...x,y  該值規定了多邊形各邊的坐标，第一個坐标必需和最後一個坐标相同(poly)
• href              URL                    定義此區域的目标URL
• nohref           nohref               規定該區域沒有相關連結
• shape            defalut (全部區域) rect(矩形區域) circle(圓形) poly(多邊區域)
• target            _blank （在新視窗打開被連結文檔）_self（在相同視窗打開被連結文檔）

例子：<img src="images/1.png" alt="封面" usemap="#maping">

<map name="maping" id="maping">

               <area shape="rect" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" coords="100,175,179,190"/>

               <area shape="circle" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow"   coords="50,50,50"/>

</map>

<figure>和<figcaption>标簽

<figure>标簽規定獨立的内容，如圖像、圖表和照片等，<figcaption>标簽定義<figure>元素的标題

例子：<figure>

               <figcaption>圖書封面</figcaption>

               <img src="images/1.png" alt="封面"/>

          </figure>

HTML5音視訊

HTML5視訊

<video>标簽定義視訊。使用<video>元素播放視訊時不需要任何插件，隻要浏覽器支援HTML5就可以。

屬性：

• autoplay      autoplay      視訊就緒後自動播放
• controls       controls       顯示視訊播放器控件，比如播放按鈕
• height
• width
• loop             loop             循環播放
• poster          URL             定義視訊下載下傳時顯示的圖像，或使用者單擊播放按鈕前顯示的圖像
• src               URL             播放視訊的URL
• muted          muted          靜音
• preload        定義視訊在頁面加載時進行加載，并預備播放。如果使用“autoplay”，則忽略該屬性。auto（預設值，預加載全部的音頻/視訊）metadata （僅加載音頻/視訊的中繼資料）none（不加載音頻/視訊）

對于不支援<video>元素的浏覽器可以在元素内容中添加替換文字。例如：

<video src="other/Wiid.webm" controls="controls" autoplay>您的浏覽器不支援video元素</video>

目前<video>元素 支援三種視訊編碼 ：

OGG（.ogv）               Firefox 3.5+、Chrome 3.0+、Opera 10.5+

WebM（.webm）         Firefox 4.0+、Chrome 6.0+、Opera 10.6+

Mp4（.m4v）               IE 9.0+、safari3.1+、iso 5.0、Android 4.0+

Mp4（.mp4）               IE 9.0+、safari3.1+、iso 3.0、Android 2.3+

為了解決相容問題，可以使用<source>元素為同一個媒體資料指定多個播放格式與編碼方式，例如：

           <video controls="controls" autoplay="autoplay">

         <source src="other/Wild.ogv type="video/ogg">

         <source src="other/Wild.mp4 type="video/mp4">

          <source src="other/Wild.webm type="video/webm">

</video>

HTML5音頻

<audio>元素隻支援三種音頻編碼：

OGG（.ogg）          Chrome 、Firefox、IE9、Opera

MP3（.mp3）          Chrome 、IE9、Safari

WAV                         Firefox、Opera

<embed>标簽定義嵌入的内容

一旦對象嵌入頁面中，對象将成為頁面的一部分，該元素主要用來嵌入視訊和Flash。

屬性

    src          URL             嵌入内容的URL

    height

    width

    type     MIME_type    定義嵌入内容的類型。參閱IANA MIME類型清單http://www.iana.org/assignments/media-types/media-types.xhtml

例子：

插入一個flash

<embed src="other/bu.swf" type="application/x-shockwave-flash" width="480px" height="360px"></embed>