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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值