H T M L & C S S

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两套文件就没问题了。

视频

下面是个视频的例子，虽然只是个例子，但大家时间宝贵，所以我找了一个还比较有用的视频来做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二种影音格式