HTML5页面中的多媒体

139 阅读2分钟

在HTML5中,新增了两个元素——video元素与audio元素。

video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的音频数据。

使用这两个元素,就不再需要使用其他插件了,只要使用支持HTML5的浏览器就可以了。

这两个元素的使用方法都很简单,首先以audio元素为例,

只要把播放音频的URL给指定元素的src属性就可以了。

audio元素使用方法如下。

您的浏览器不支持audio 元素!

通过这种方法,可以把指定的音频数据直接嵌入在网页上,

其中“您的浏览器不支持audio元素!”为在不支持audio元素的浏览器中所显示的替代文字。

video元素的使用方法也很简单,只要设定好元素的长、宽等属性,

并且把播放视频的URL地址指定给该元素的src属性就可以了。video元素的使用方法如下。

您的浏览器不支持video 元素!

另外,还可以通过使用source元素来为同一个媒体数据指定多个播放格式与编码方式,

以确保浏览器可以从中选择一种自己支持的播放格式进行播放,

浏览器的选择顺序为代码中的书写顺序,它会从上往下判断自己对该播放格式是否支持,

直到选择到自己支持的播放格式为止。其使用方法如下。

source元素具有以下几个属性。

 src属性是指播放媒体的URL地址。

 type属性表示媒体类型,其属性值为播放文件的MIME类型,

该属性中的codecs参数表示所使用的媒体的编码格式。

因为各浏览器对各种媒体类型及编码格式的支持情况都不相同,

所以使用source元素来指定多种媒体类型是非常有必要的。

 IE9:支持H.264和VP8视频编码格式;支持MP3和WAV音频编码格式。

 Firefox 4及以上、Opera 10及以上:支持Ogg Theora和VP8视频编码格式;

支持Ogg vorbis和WAV音频格式。

 Chrome 6及以上:支持H.264、VP8和Ogg Theora视频编码格式;

支持Ogg vorbis和MP3音频编码格式。

最靠谱的WEB前端教程——整整140集,全程干货无废话,学完变大佬!