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="#" coords="100,175,179,190"/>

               <area shape="circle" href="#"  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>