【原创】HTML5内置音频/视频播放功能

HTML5有一个非常好的进步,就是在某种程度上简化了音频与视频的播放,以前我们要在网页中播放音频或视频往往需要使用插件。而HTML5简化了这个功能,现在各个浏览器都内置了音频、视频播放功能,以支持HTML5的规范

本文试图说明这个功能。

音频

以下是非常简单的一段代码来播放音频

<audio controls > <!--播放器-->
  <source src="xxx.ogg" type="audio/ogg"></source><!--音源1-->
  <source src="xxx.mp3" type="audio/mp3"></source><!--音源2-->
  Your browser does not support the audio element.<!--若浏览器不支持-->
</audio> 

效果是这样的(请注意,默认这个内置控件是灰色的,但是其颜色可以通过CSS的background来调,现在我定义其为红色,但实际效果你可以发现是是一种红色+灰色的混合。好像没有办法单独定义比如play按钮的颜色。还有一些其他玩法,可以自行摆渡“style HTML5 audio”。)

audio{background:red;} 

不同浏览器对于html5 audio标签和音频格式的兼容性,基本上,有ogg和mp3两套文件就没问题了。

音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

视频

下面是个视频的例子,虽然只是个例子,但大家时间宝贵,所以我找了一个还比较有用的视频来做Demo,关于如何选用一个更安全又容易记忆的密码,这段ogv视频来自Mozilla,他们最著名的产品是火狐浏览器,以下是代码范例:

<video width="320" controls="">
<source type="video/ogg" src="xxx.ogv"></source>
Your browser does not support the HTML5 Vedio element. why not goto Chorme or Firefox
</video>

效果是这样的:(注意这里规定了视频的宽度,其高度会自行调整,没必要同时硬性规定高度)



这段代码规定视频宽度为100%,所以它尽量撑满

<video width="100%" controls="controls" src="./vedio/choose-passwords.ogv">
Your browser does not support the HTML5 Vedio element. why not goto Chorme or Firefox
</video>

这段代码不规定视频宽度,所以它使用原始大小

<video  controls="controls" src="./vedio/choose-passwords.ogv" type="video/ogg">
Your browser does not support the HTML5 Vedio element. why not goto Chorme or Firefox
</video>

html5 共支持三种格式的视频: ogg/ogv、mp4、webM。浏览器的兼容性如下,基本上备好mp4与ogv二种影音格式

浏览器 | 影音格式 Ogg Theora MP4(H.264) WebM
Internet Explorer9 x x
Firefox5+ x
Chrome13+
Safari5+ x x
Opera11+ x