html5 video.js 使用及兼容全部瀏覽器

廢話少說，直接開始

1、準備材料

　　video.js下載： http://www.videojs.com/

2、代碼

　　引入相關文件：（必須放在文件的開頭，也是說必定要放在video標籤以前）

　　

　　貼入html代碼：

<video id="example_video_1" class="video-js" width="640" height="410" controls="controls" autoplay preload="auto"  poster="/Images/treatment/reenex2.png">  
   <source src="/Content/videos/homepage.MP4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />  
   <source src="/Content/videos/homepage.oggtheora.ogv" type='video/webm; codecs="vp8, vorbis"' />  
   <source src="/Content/videos/homepage.webmhd.webm" type='video/ogg; codecs="theora, vorbis"' />   
</video>

　　在這裏爲了兼容不一樣的瀏覽器，因此給出了三種視頻格式，但問題仍未解決，後面我會給出方案。

　　對video 一些屬性作一些簡單的說明：

　　controls：是否顯示控制面板

　　autoplay：是否自動播放

　　preload：視頻是否預加載

　　poster：當前視頻數據無效時顯示（預覽圖）

　　更詳細的介紹能夠查看這篇文章：http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html

3、解決兼容性

　　說明：上述javascript代碼進適用於支持html5元素的IE版本，對於老版本的IE能夠經過HTML5shiv來使不支持HTML5的瀏覽器支 持HTML新標籤。htnl5shiv主要解決HTML5提出的新的元素不被IE6/IE7/IE8識別，這些新元素不能做爲父節點包裹子元素，且不能應 用CSS樣式。讓CSS 樣式應用在未知元素只需執行 document.createElement(elementName) 便可實現。html5shiv的工做原理也就是基於此。html5shiv的使用很簡單，因爲IE9是支持html5的，故只須要在head中添加以下代 碼便可：

　　

<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5media.min.js"></script>   

　　可是你們都知道，如今的google不能訪問了，真是XXXXX，

　　那我就乾脆本身down下來，當你down下來之後你會發現還有問題，html5media.min.js文件出錯，仔細查找，原來沒有找到兩個swf文件，你們都知道，播放視頻的插件，這兩個視頻是　　必不可少的。那就再把他們down下來。

　　真個文件我已經分享在個人網盤：http://pan.baidu.com/s/1ntiaul7

　　這樣彷佛問題能夠解決了，當興沖沖的run後，居然還有錯誤：

　　

　　本身分析得知緣由：video的src屬性是必須的

　　接下來咱們要該一下video標籤

　　

 <video id="example_video_1" class="video-js" width="640" height="410" controls="controls" autoplay preload="auto" src="/Content/videos/step1.MP4"  poster="/Images/treatment/reenex2.png">  
  　　<source src="/Content/videos/step1.MP4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />  
 </video> 

　　爲了保險，仍是留了一個source。

　　這樣就沒問題了，運行起來，看一下Chrome，FF IE Safair都沒問題

　　下面傳都服務器看一下（前提：iis必定要配置 擴展名爲.mp4的MIME，類型爲：video/mpeg）

　　但問題又出來了谷歌，safair能夠正常播放，但FF 跟IE不能播放，通過查閱資料得知，MiME類型應該爲 video/mp4 才能夠

　　這樣就能夠,寫出來但願給你們節省點時間，做爲程序員，大家都懂得......

 

　　最近又發現，在服務器上，必定要設置一下MIME類型，添加  .mp4=video/mp4  其餘的不怎麼好使（尤爲FF），還有一點，要上傳的視頻最好不要有特殊符號（如+ #）,那樣會網頁編　　碼後請求會找不到，我也不知道怎麼回事

　　你們要注意，這個js要在服務器端才起做用（感謝一位博友）