一個好用的html影片播放器相容主流瀏覽器

最近工作上的需求需要對行動用戶端上發送的影片在網頁上播放，and 上傳影片並在網頁上播放（例如上傳教學影片或動態分享等）（部落客碎念：行動用戶端上傳的你不會用手機的播放器看啊，網頁上傳你不會上傳到youku或youtube等各大知名網站上傳然後在自己的網站上直接引用連結啊，還不佔伺服器頻寬，經濟又實惠有木有！

多媒體的上傳和一般的檔案上傳也沒什麼差別，這邊就不多加贅述了，不了解的可以到http://www.php.cn/php/php-file-upload.html這邊了解一下。 

影片截圖是在服務端做的，還是使用ffmpeg，目前還是很穩定。

開始的時候想仿照下youku這種專業的影片網站，發現他們都是flash實現的，可是博主對flash七竅通了六竅--一竅不通（呵呵呵呵。），再加上貌似youtube都開始其他嘗試了，所以果斷就放棄在這方面的探索。 

在投入google的懷抱半天后，終於趕腳貌似html5的video標籤是個好東西，可惜就是兼容性差了點，不過html5畢竟是趨勢，所以果斷還是在這方面下功夫了。 （部落客碎碎念：播放一個影片只要一個標籤就全搞定了，不用他以為我傻啊。。呵呵呵呵） 

花了1個小時的搜索，發現在http://www .php.cn/html/html-html_videos.html這裡提供了一個解決方法： 

程式碼如下:

<video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4" /> 
<source src="movie.ogg" type="video/ogg" /> 
<source src="movie.webm" type="video/webm" /> 
<object data="movie.mp4" width="320" height="240"> 
<embed src="movie.swf" width="320" height="240" /> 
</object> 
</video>

目測這種方式應該可以相容一大部分情況了。

可是我們無法阻止用戶上傳的影片格式，也無法左右用戶使用的瀏覽器類型，而且用戶只會上傳一種影片格式，但是各個瀏覽支援的影片的格式不一致（萬惡的瀏覽器。理想是美好的現實是骨感的。不過透過長時間的google還是發現了一個可以讓主流瀏覽器兼容vedio標籤的js插件http://html5media.googlecode.com/svn/trunk/src/html5media.min.js
在web上播放視頻也可以使用兩種方式內嵌影片（借助img標籤，好奇怪只有ie支援這種模式而且一般不開啟） 和使用助手。所以我們可以藉助一些助手來實現上面不支援的類型視訊檔案的播放（例如：quicktime） 

#綜合以上兩點的視訊播放程式碼如下： 

程式碼如下:

function showVideo(o,s,w, h, t){ //t文件格式 
var _html = ''; 
if($.inArray(t, ['ogg', 'mp4', 'webm']) >= 0){ //html5 surport 
var _doc=document.getElementsByTagName('head')[0]; 
var script=document.createElement('script'); 
script.setAttribute('type','text/javascript'); 
script.setAttribute('src','http://html5media.googlecode.com/svn/trunk/src/html5media.min.js'); 
_doc.appendChild(script); 
script.onload=script.onreadystatechange=function(){ 
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ 
_html = &#39;<video src="&#39;+s+&#39;" width="&#39;+w+&#39;" height="&#39;+h+&#39;" controls autobuffer >&#39;; 
_html += &#39;</video>&#39;; 
$(o).css({"width":w+&#39;px&#39;, &#39;height&#39;:h+&#39;px&#39;, &#39;cursor&#39;:&#39;default&#39;}); 
$(o).html(_html); 
} 
script.onload=script.onreadystatechange=null; 
} 
}else{ //other like 3gp 
_html += &#39;<object width="&#39;+w+&#39;" height="&#39;+h+&#39;" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">&#39;; 
_html += &#39;<param name="src" value="&#39;+s+&#39;">&#39;; 
_html += &#39;<param name="controller" value="true">&#39;; 
_html += &#39;<param name="type" value="video/quicktime">&#39;; 
_html += &#39;<param name="autoplay" value="false">&#39;; 
_html += &#39;<param name="target" value="myself">&#39;; 
_html += &#39;<param name="bgcolor" value="black">&#39;; 
_html += &#39;<param name="pluginspage" value="http://www.apple.com/quicktime/download/index.html">&#39;; 
_html += &#39;<embed src="&#39;+s+&#39;" width="&#39;+w+&#39;" height="&#39;+h+&#39;" controller="true" autoplay="false" align="middle" bgcolor="black" target="myself" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/index.html"></embed>&#39;; 
_html += &#39;</object>&#39;; 
$(o).css({"width":w+&#39;px&#39;, &#39;height&#39;:h+&#39;px&#39;, &#39;cursor&#39;:&#39;default&#39;}); 
$(o).html(_html); 
} 
}

#

以上是一個好用的html影片播放器相容主流瀏覽器的詳細內容。更多資訊請關注PHP中文網其他相關文章！