html5的<audio>标签和<video>标签_优品建站

html5的<audio>标签和<video>标签

  在HTML5中,新增了两个标签——<video>标签与<audio>标签。<video>标签专门用来播放网络上的视频或电影,而<audio>标签则专门用来播放网络上的音频数据。使用这两个标签,就不再需要使用其他任何插件了,只要使用支持HTML5的浏览器就可以了。表6-2中介绍了目前浏览器对<video>标签与<audio>标签的支持情况。
表6-2 目前浏览器对<video>标签与<audio>标签的支持情况

  这两个标签的使用方法都很简单,首先以<audio>标签为例,只要把播放音频的URL给指定标签的src属性就可以了,<audio>标签使用方法如下。
<audio src="http://mingri/demo/test.mp3">
  您的浏览器不支持audio标签!
</audio>
  通过这种方法,可以把指定的音频数据直接嵌入网页,其中“您的浏览器不支持<audio>标签!”为在不支持<audio>标签的浏览器中所显示的替代文字。
  <video>标签的使用方法也很简单,只要设定好标签的长、宽等属性,并且把播放视频的URL地址指定给该标签的src属性就可以了,<video>标签的使用方法如下。
<video width="640" height="360" src=" http://mingri/demo/test.mp3">
您的浏览器不支持<video>标签!
</video>
  另外,还可以通过使用<source>标签来为同一个媒体数据指定多个播放格式与编码方式,以确保浏览器可以从中选择一种自己支持的播放格式进行播放,浏览器的选择顺序为代码中的书写顺序,它会从上往下判断自己对该播放格式是否支持,直到选择到自己支持的播放格式为止。其使用方法如下。
<video width="640" height="360">
<!--在Ogg theora格式、Quicktime格式与MP4格式之间选择自己支持的播放格式。-->
<source src="demo/sample.ogv" type="video/ogg; codecs='theora, vorbis'"/>
<source src="demo/sample.mov" type="video/quicktime"/>
</video>
<source>标签具有以下两个属性。
src属性是指播放媒体的URL地址。
  type属性表示媒体类型,其属性值为播放文件的MIME类型,该属性中的codecs参数表示所使用的媒体的编码格式。
  因为各浏览器对各种媒体类型及编码格式的支持情况各不相同,所以使用<source>标签来指定多种媒体类型是非常有必要的。
  (1)IE:只支持MP4视频编码格式;只支持MP3音频编码格式。
  (2)Firefox:支持MP4、Ogg和Web M视频编码格式;支持MP3、Ogg和WAV音频编码格式。
  (3)Chrome:支持MP4、Ogg和Web M视频编码格式;支持MP3、Ogg和WAV音频编码格式。

  • html5实例:改进“About Me”页面
    本文我们将试着给“About Me”页面进行修改完善。
  • html5+css3+javascript实用案例:分组标签制作联系方式
    本案例将实现明日学院网站的“联系我们”页面。将介绍<div>和<span>分组标签,对页面的内容进行分类分组处理。下面将详细介绍<div>标签和<span>标签。
  • HTML5案例实战:访问用户位置的方法和应用技巧
    由于国家网络限制,内地访问谷歌地图不是很顺畅,建议读者选用高德地图或百度地图开发API,也可以直接使用本书提供的用户key(http://lbs.amap.com/)进行上机练习。
  • html5网站制作实例:改进“About Me”页面
    我们已经了解了微格式和微数据这两个语义流派的基本结构。以此为起点,大家可以自己(到http://microformats.org)去找新的微格式,或者(到http://schema.org)去找微数据词汇表,从头开始编写富有语义的标记。
  • HTML5提供网站制作的表单验证属性
    HTML5为表单验证提供了极大的方便,在验证表单的方式上显得更加灵活。表单验证,首先会基于前面讲解的表单类型的规则进行验证;其次是为表单元素提供了一些用于辅助表单验证的属性。
  • 浏览器对HTML5语义元素的支持情况
    HTML5的这些语义元素已经基本得到了所有现代浏览器的支持。就算你想找到一个不支持它们的Chrome、Firefox、Safari或Opera的版本,都不太可能。最大的绊脚石还是IE9之前的Internet Explorer,包括仍然占很大比例的IE8。
  • HTML5与移动Web开发
    HTML5技术早在2011年就已经被各大浏览器厂商所支持,但是该标准真正制定的完成时间是2014年10月29日。HTML5具有以下特性,以适应移动Web开发。
  • html5网站制作层叠样式表(CSS)简介
    CSS(Cascading Style Sheet,一般翻译为“层叠样式表”或“级联样式表”)是一组HTML元素外观的设置规则,用于控制Web页面的表现形式。
  • HTML5网站制作语法的新变化
    为了兼容各个不统一的页面代码,HTML5的设计在语法方面做了以下变化。
  • 基于HTML5的移动Web开发
    作为新一代的Web技术标准,HTML5标准定义的规范非常广泛,以下标准在目前的移动Web浏览器中已得到很好的支持。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC