接上一篇，我們繼續學習...

十六、Video支持

與<audio>元素很類似，在新的瀏覽器中也存在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>

無論是”ogg”格式還是”mp4″格式的視頻Chrome瀏覽器都能正確編碼

還有一個值得注意的一些事情：

我們技術上不需要來設置type屬性，但是，如果我們不這樣做，瀏覽器不得不自己去尋找類型。節省一些帶寬，還是你自己聲明下吧。

十七、視頻預載(Preload Videos)

預載屬性不完全是你想的那個樣子，雖然，你應該先決定是否要在瀏覽器預裝的視頻。是否有必要？或許吧。如果訪問者訪問一個專門展示了一個視頻的頁面，你一定要預載的視頻，節約參觀者等待的一部分時間。影片可以通過設置 preload=”preload”或是簡單地添加preload進行預載。我更喜歡后者的解決方案，它少了一點多余的東西。<video preload>

十八、顯示控制條

如果你使用過上面的每一個提到的技術點，你可能已經注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內指定controls屬性。<video preload controls>請注意，不同瀏覽器渲染出來的進度條的模樣都是不一樣的。

十九、正則表達式

你發現自己多久匆匆編寫一些正則表達式驗證一個特定的文本。多虧了新的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屬性，則提交表單時，如果文本框中的內容不符合其正則表達式，文本框會高亮顯示。

二十、屬性支持檢測

如果我們沒有方法檢測瀏覽器是否支持這些屬性，這些就不能稱之為好的屬性。恩，不錯的觀點，事實上我們是有幾種方法的，這里我們討論2個。第一個是利用優秀的Modernizr庫，或者，我們可以創建和分析這些元素，以確定瀏覽器的能力。例如，在我們前面的例子，如果我們要確定瀏覽器是否能使用pattern的屬性，我們可以添加一小段JavaScript到我們的頁面上：

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

事實上，這是一種確定瀏覽器兼容的常用方法。jQuery庫了利用這種伎倆。在上面，我們創建了一個新的input元素，并確定了里面的pattern屬性瀏覽器是否認得。如果是，瀏覽器則支持此功能。否則，當然就不支持了。

<script>

if (!'pattern' in document.createElement('input') ) { }

</script>

謹記此方法依賴于JavaScript。

來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]

總結

以上是生活随笔為你收集整理的HTML5新特征、窍门和技术（16~20）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。