So Beautiful 旅程——HTML5的多媒体支持

       以前在大家制作网页的时候，通常都需要借助于第三方插件，比如flash；除此之外，开发者也可以使用自主开发的多媒体播放插件，但是HTML5规范的出现改变了这种状况。

 

 以下是本章的内容，本人使用过以后感觉使用性其实一般，在面对现今浏览器版本不一，浏览器对HTML5元素方面支持率的层次不齐，以及格式方面的欠缺，导致HMTL5多媒体支持方面还是需要一段时间的发展区适应。

第五章   HTML5的多媒体支持

一、使用audio和video元素

代码：

预览效果：

 

 

指定controls属性就会生成播放控制条

对于音频格式，目前HTML5推荐OGG Vobis压缩格式，MP3具备的，OGG Vobis都具备而且更加优秀，而且完全免费，而且开放

对于视频格式，目前HTML推荐使用VP8作为视频压缩格式（*.webm）

Chrome对各种音频、视频的支持最好

考虑到各浏览器对音频、视频的支持互不相同，开发者可以指定多个媒体源，这需要借助<source>子元素来实现：

代码：

二、使用JavaScript脚本控制媒体播放

1.HTMLAudioElement与HTMLVideoElement支持的方法

这两个对象有下面这些方法：

play()：播放

pause()：暂停

load():重新装载

canPlayType(type)：可播放type类型(MIME字符串)的音频、视频

代码：

预览效果：

FireFox支持较好（Opera和FireFox仅支持OGG格式音频，不支持MP3）

 

2.HTMLAudioElement与HTMLVideoElement支持的属性

TimeRanges对象，类似于数组，该对象包含多个时间段：

start(index):返回第index+1个时间段的开始时间

end(index):返回第index+1个时间段的结束时间

 

三、事件监听

1.事件

2.监听器

代码：

预览效果：

 

 

注：以上代码摘录于《疯狂HTML5/CSS3/JavaScript讲义》；

       这篇文章主要是对这些章节进行了分类和归纳，如果您需要更加详细的信息，可以查阅《疯狂HTML5/CSS3/JavaScript讲义》这本书，或登陆登陆：http://www.crazyit.org