基於Html5的相容所有主流瀏覽器的線上視訊播放器videoJs

基於Html5的相容所有主流瀏覽器的線上視訊播放器videoJs
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

       在一個新的專案上需要實現線上視訊播放,原本打算藉助優酷的視訊儲存和播放,但是發現這個需要使用者註冊優酷賬戶,嚴重影響使用者體驗,於是這個方案被斃掉了。於是開始了自己開發一個線上播放器的想法,當然儘量使用已有的開源播放器。忽然想到html5的video和audio可以實現視訊和音訊的播放。大喜,晚上搜尋html5播放器,發現很多國外開發的很漂亮的html5播放器,其中就有videojs。由於videojs能夠根據IE版本判斷是否支援html5,若是不支援切換到flash播放器進行播放。看到這一點很滿意果斷選擇videojs作為線上視訊播放器,於是開始了後面的幾天的漫漫除錯之路。

        videojs不需要第三方js庫,所以相對很簡單,大家可以從官網http://www.videojs.com/上面直接下載。測試環境windows2003 IIS6。在測試過程中由於沒有對網站設定MIME型別進行設定,在所有的瀏覽器上都無法播放,通過firebug發現404,視訊原始檔和vjs.woff找不到,於是IIS中的MIME設定中新增了以下video/mpeg 和 application/x-font-woff這兩個MIME型別。新增之後在IE9以上版本測試一直無法播放,但是videojs的官方視訊可以播放,一直很納悶,研究了很久不得其所。最後通過IE的toolbar工具發現提示不是支援的視訊或音訊格式,於是上網搜尋.mp4的MIME型別為video/mp4。修改後測試了firefox、chrome、360安全/極速瀏覽器、IE6/7/8/9,嘿嘿,都可以播放,很高興,沒有白忙活這段時間。

      研究這個線上播放器也算積累些HTML5的一些基礎知識,目前html5的視訊編碼格式分為3中,又一個不統一,搞死開發人員。

      

相關文章

程式語言 最新文章