22個HTML5  第三講：我們繼續(xù)講解HTML5的技巧。

16. 視頻支持

音頻元素 <audio>非常像，在新的瀏覽器上也支持HTML5視頻。事實上，就在最近YouTube宣布了一項新的 HTML5視頻嵌入。可惜的是，由于HTML5說明文件并沒有為視頻指出某個特定的編碼器，所以都主要取決于瀏覽器來決定了。盡管Safari和IE9可以支持H.264 格式的視頻，F(xiàn)irefox 和Opera卻仍然堅持Theora 和Vorbis格式。因此，顯示HTML5視頻的時候，你必須提供兩種格式。

17. 視頻預(yù)先加載

你首先需要決定是否需要瀏覽器來預(yù)先加載視頻。是否有需要？假設(shè)，一個訪客進(jìn)入某個專門用來顯示視頻的頁面，那么就非常有必要預(yù)先加載這個頁面節(jié)省一點等待的時間。你可以通過設(shè)置 preload=”preload”來預(yù)先加載視頻，或者之間添加preload也可以。

<Video preload>   
…  
</video >   

18. 顯示控件

你可能已經(jīng)注意到，用上面的代碼的話，視頻將只會顯示成一個圖片，而沒有任何可控制的元件。為了獲取這些播放控件，我們必需在視頻元素里指定這些控件屬性。

<video preload controls>   
…  
</video >   

19. 正則表達(dá)式

對虧了新模式的屬性，我們可以直接在代碼中插入一個正則表達(dá)式。

<Form method=post action=”">   
<label for=”username”>create a username: </label>   
<input id=”username” type=”text” name=”username” placeholder=”4 <> 10″ required=”required” autofocus=”autofocus” pattern=”[A-Za-z]{4,10}”>   
<button type=”submit”>Go </button>   
</form>   

如果你比較熟悉正則表達(dá)式的話就會注意到這個新模式: [A-Za-z]{4,10}只接受大小寫字母。這個字符串最少必需有四個字符，最多是十個字符。

20. 檢測瀏覽器對屬性的支持

前面提到過并非所有的瀏覽器都支持這些屬性，那是否有什么方法能夠判斷瀏覽器是否能夠識別它們呢？這個問題問得非常好，這里給大家介紹兩種方式，第一個選擇是使用Modernizr來檢測，或者你也可以創(chuàng)建并剖析這些元素來看看瀏覽器都有什么能力。例如，在前面的例子里，如果我們要確定瀏覽器是否能夠執(zhí)行pattern屬性，就可以在頁面上添加JavaScript:

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

實際上，這是確定瀏覽器兼容性的一種非常常用的方法。jQuery庫利用了這個技巧。上面的代碼里，我們創(chuàng)建了一個新的輸入元素，并確認(rèn)pattern屬性是否能夠被識別。如果能夠識別的話，瀏覽器就支持這個功能，否則就不支持。

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

記住，這將需要依靠 JavaScript來實現(xiàn)！

21. Mark元素

<mark> 元素的主要功能就是在頁面中高亮顯示那些需要在視覺上向用戶突出其重要性的文字。包裹在此標(biāo)簽里的字符串必須與用戶當(dāng)前的行為相關(guān)。例如，如果我在一些博客中搜索"Open your Mind" ，我可以使用在<mark>標(biāo)簽里使用JavaScript 來包裹每一次動作。

<h3> search results </h3>   
<h6> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </h6>   

22. 何時使用<div>

是否還需要使用<div>標(biāo)簽?zāi)?？?dāng)然需要。例如，如果你想在一個元素里將一段代碼包裹住，特別是為了內(nèi)容的定位，<div> 將會是非常理想的選擇。不過，如果不是上述情況而是要包裹博客文章、或者頁腳的鏈接列表，建議你分別使用 <article>和<nav>元素。