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

作者：优品建站      发布日期：2022-03-31      访问量：110

  在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音频编码格式。