十七、Video支持

　　与元素很类似，在新的浏览器中也存在Video!事实上，就在最近，YouTube宣告了新的HTML5视频嵌入，当然，是为支持此功能浏览器。因为HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。虽然Safari和Internet Explorer9可以预期支持H.264格式的视频(其中Flash播放器可以播放)，Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，当显示HTML5的视频，您必须提供这两种格式。

<video controls preload>   
   <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />     
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />    
  <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> 
</video> 

　　还有一个值得注意的一些事情：

　　1. 我们技术上不需要来设置type属性，但是，如果我们不这样做，浏览器不得不自己去寻找类型。节省一些带宽，还是你自己声明下吧。

　　2. 不是所有的浏览器理解HTML5视频。在资源元素的下面，我们可以提供一个下载链接，或嵌入视频的Flash版本代替。这取决于你。

　　3. controls和preload属性就会在下面提及。

　　4. 有方法可以让所有的浏览器支持video标签，具体参见我前面的“让所有浏览器支持HTML5 video视频标签”一文。

　　十八、视频预载(Preload Videos)

　　预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。是否有必要?或许吧。如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时间。影片可以通过设置 preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案，它少了一点多余的东西。

<video preload> 

　　请注意，不同浏览器渲染出来的进度条的模样都是不一样的。

　　二十、正则表达式

　　你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。

<form action="" method="get">    
  <label for="username">姓名:</label>    
  <input id="username" name="username" type="text" placeholder="4-10个英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus />     
<button type="submit">提交</button> 
</form> 

　　如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。如下图所示。

　　我自己小测了下，貌似目前只在Chrome下有效(win系统)

　　注意到，我们已经开始组合使用这些很棒的属性。

　　如果您对正则表达式概念模糊了，可以参见这里。

　　二十一、属性支持检测

　　如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。恩，不错的观点，事实上我们是有几种方法的，这里我们讨论2个。第一个是利用优秀的Modernizr库，或者，我们可以创建和分析这些元素，以确定浏览器的能力。例如，在我们前面的例子，如果我们要确定浏览器是否能使用pattern的属性，我们可以添加一小段JavaScript到我们的页面上：

alert( 'pattern' in document.createElement('input') ); // boolean   

　　事实上，这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面，我们创建了一个新的input元素，并确定了里面的pattern属性浏览器是否认得。如果是，浏览器则支持此功能。否则，当然就不支持了。

<script>if (!'pattern' in document.createElement('input') ) {    // do client/server side validation}  
</script> 

　　谨记此方法依赖于JavaScript。