HTML5的確很好，特別是對(duì)于我們開(kāi)發(fā)者而言，以前需要寫(xiě)一大段代碼，現(xiàn)在一行代碼也許就能解決，徹底提供了我們的效率，比如視頻音頻的video和audio這兩個(gè)新標(biāo)簽就為我們省下了不少事情。然而，遺憾的是很多舊版本的瀏覽器（尤其IE9以下版本）不能夠支持它們，搞得很多開(kāi)發(fā)者還是使用傳統(tǒng)的方式去解決問(wèn)題。

這樣一來(lái)至少是現(xiàn)在，HTML5這么好的東西對(duì)于有的項(xiàng)目來(lái)講卻是然并卵。然而高手在民間，人民的智慧是無(wú)窮的；更可喜的是有人愿意為開(kāi)發(fā)者做貢獻(xiàn)，不僅有了自己的解決方案，而且還以非常優(yōu)雅的方式公布其解決方案。這就是我們這里要說(shuō)的html5media.js。它是一個(gè)JS類庫(kù)（對(duì)了，不需要任何類庫(kù)的支持，比如jQuery也不需要），讓支持HTML5的瀏覽器依然使用HTML5，不支持HTML5的瀏覽器使用該庫(kù)所使用的falsh播放器。

這樣我們就可以放心地使用HTML5來(lái)承載我們網(wǎng)頁(yè)音頻視頻的播放了。使用這個(gè)類庫(kù)的方法是最簡(jiǎn)單的，直接在網(wǎng)頁(yè)中引入這個(gè)類庫(kù)即可，其官網(wǎng)提供了CDN服務(wù)：

<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>

除此之外，Bootstrap中文網(wǎng)也提供了CDN服務(wù)，地址為：http://www.bootcdn.cn/html5media。對(duì)，就是這么簡(jiǎn)單，引入一段JS就成了，接下來(lái)你的可以在你的網(wǎng)頁(yè)中使用HTML5的video和audio標(biāo)簽了。

官網(wǎng)及演示：https://html5media.info

github：https://github.com/etianen/html5media

大家可以在它的官網(wǎng)查看DEMO（首頁(yè)就是），你可以分別用Chrome、IE各個(gè)版本等各種瀏覽器訪問(wèn)，看看有啥不一樣，看到區(qū)別也許你就能夠理解這個(gè)類庫(kù)的意義了。

===========================我是分割線===========================

到這里還沒(méi)完，我就知道也許有那么一些朋友就是強(qiáng)迫癥，就是希望這樣的代碼在自己服務(wù)器的本地，也就是不使用第三方的CDN服務(wù)。不過(guò)也不一定是因?yàn)閺?qiáng)迫癥，因?yàn)樵趪?guó)內(nèi)訪問(wèn)其官方的資源會(huì)很慢，于是還不如使用我們自己服務(wù)器的資源。

這時(shí)候需要注意了，如果把這個(gè)類庫(kù)放在本地，那么就不僅僅是這個(gè)類庫(kù)要down下來(lái)了，還有其他的文件，否則你就會(huì)發(fā)現(xiàn)你的瀏覽器會(huì)報(bào)404錯(cuò)錯(cuò)誤，也就會(huì)發(fā)現(xiàn)在不支持HTML5的瀏覽器中你的視頻音頻播放不了。

因?yàn)檫@個(gè)類庫(kù)會(huì)調(diào)用相對(duì)路徑的flash文件，還需要flowplayer.controls.swf、?flowplayer.swf、expressInstall.swf、flowplayer.audio.swf；把這四個(gè)文件放在跟JS同一目錄即可；這些文件在github中有，可以看到在bootstrap中文網(wǎng)的CDN服務(wù)中就會(huì)看到這些文件。