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

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

這樣我們就可以放心地使用HTML5來承載我們網(wǎng)頁音頻視頻的播放了。使用這個(gè)類庫的方法是最簡單的，直接在網(wǎng)頁中引入這個(gè)類庫即可，其官網(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ì)，就是這么簡單，引入一段JS就成了，接下來你的可以在你的網(wǎng)頁中使用HTML5的video和audio標(biāo)簽了。

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

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

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

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

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

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

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