來源：http://blog.csdn.net/freshlover/article/details/7535785/
由於html5的出現，讓網頁中的視頻、音頻有了更加便捷的實現方式。但是video、audio標簽只在IE 9+、Safari 3+、FireFox 4+、Opera 10+、Chrome 3+的瀏覽器版本得到了支持，並且各瀏覽器對於視頻編碼格式的支持不一致，這就需要我們考慮一個綜合的實現方案，使得視頻在不同瀏覽器中都能順利播放，而且在老版本的瀏覽器中也能得到支持。 以下是結合項目經驗，總結出的幾種方案，與大家分享。 方案1、使用VideoJS插件實現兼容 插件下載http://videojs.com 使用新版VideoJS插件需要注意的是其使用方法： 使用步驟一：head部分添加 [html] view plaincopy
說明：上述javascript代碼進適用於支持html5元素的IE版本，對於老版本的IE可以通過HTML5shiv來使不支持HTML5的瀏覽器支持HTML新標簽。htnl5shiv主要解決HTML5提出的新的元素不被IE6/IE7/IE8識別，這些新元素不能作為父節點包裹子元素，且不能應用CSS樣式。讓CSS 樣式應用在未知元素只需執行 document.createElement(elementName) 即可實現。html5shiv的工作原理也就是基於此。html5shiv的使用很簡單，由於IE9是支持html5的，故只需要在head中添加如下代碼即可： [html] view plaincopy <!–[if lt IE 9]>
<![endif]–> 使用步驟二：body顯示視頻部分添加 [html] view plaincopy 說明：這里的webm格式是針對FF瀏覽器的播放格式。 目前VideoJS最新升級的版本v3.2.0，本人已測試的V3.0以上都不支持IE6/IE7/IE8/，因此我們這里采用老版本v2.0.2實現。 例如文章《VideoJs Version 3 doesn't work on IE7 / IE8》 的相關說明請查看幫助文檔http://help.videojs.com/ 使用方法是： 步驟一：在頁面head部分添加如下代碼： [html] view plaincopy
步驟二：在body顯示視頻位置添加如下代碼： [html] view plaincopy
說明：這段視頻代碼外層以一個class=“vd”的div分隔區別。這樣，支持html5的瀏覽器，會逐個檢測提供的視頻編碼格式，直到找到可以播放的格式為止，如果所有格式都不能播放，則嘗試使用flowplayer這個flash播放器（支持上述mp4格式）對視頻進行解碼。對於不支持html5的瀏覽器，也使用flash播放。因此，使用該方案只需要提供一個mp4格式的視頻即可實現在所有瀏覽器上播放，不過flash播放器對mp4格式的文件解碼較慢，為了照顧用戶體驗，故而上述我們又增加了一種flv格式的選擇。 這個方法有一缺點：算上頁面上的其他js效果，由於使用了大量的js，視頻檢測機制占用了很大的系統資源，而且我的項目頁面上有11個視頻之多，造成了頁面加載慢，降低了用戶體驗。出於此，第二套方案誕生。 方案2、由於目前大多數設備的瀏覽器對flash支持的很好，所以考慮頁面一還是使用object/embed傳統標簽嵌入視頻，用Adobe Flash Player播放。而對於不支持flash的蘋果設備，制作另一個頁面二。然后根據通過js程序對User-Agent的判斷給不同的設備瀏覽器用戶顯示不同的頁面，優酷網曾采用這種模式。 頁面一flash傳統標簽的代碼： [html] view plaincopy
說明：這里使用的優酷的視頻迷你播放器，減小了播放控制條的顯示大小，比優酷普通播放器的畫面大一些，用戶體驗好一些。 頁面二針對mac設備代碼： [html] view plaincopy 說明：mac設備的Safari瀏覽器支持mp4格式，如果視頻文件放在自己服務器，使用上述mp4格式的視頻鏈接即可；也可以使用優酷的鏈接，優酷提供自動轉碼到iOS支持格式這一機制。例如優酷視頻地址為http://player.youku.com/player.php/sid/XMzkwNzY2NTEy/v.swf，其iOS設備格式地址只需要改為 http://v.youku.com/player/getRealM3U8/vid/XMzkwNzY2NTEy/type//video.m3u8 。 相關文章請考考《分析優酷HTML5地址》地址http://blog.xiaohai.co/archives/youku-html5/ 統一采用優酷地址的好處是保證了兩個頁面的一致性，又減輕自己服務器壓力，而且可以與優酷合作更好的營銷。 頁面訪問的設備檢測代碼如下： [javascript] view plaincopy
補充：安卓系統從Android 2.1版本就開始部分支持flash，可下載安裝flash插件播放視頻。Adobe Flash Player 10.1.92.8已經支持所有android 2.2智能手機。目前主流的安卓智能機系統都在版本2.3以上，android4.0已大行其道。因此無須對安卓設備采用單獨的視頻處理方案，安卓系統和windows系統采用同樣的方案，使用flash播放器即可實現。 html5media是一個讓video、audio標簽在舊版IE中全面兼容的JavaScript類庫，它不依賴於任何JavaScript框架。頁面使用了html5media之后，當老版本的瀏覽器不支持HTML5時，它將會自動切換成Flash模式的flowplayer播放器嘗試播放。。 使用html5media的方法： 1、首先在頁面head部分加入如下腳本
你可以通過使用IE條件注釋的方法，只在舊版IE瀏覽器中加載這條JS腳本。 2、然后在body部分使用audio或video標簽，添加音頻視頻相關代碼。
這樣你便可以在IE6-IE8瀏覽器中使用audio和video標簽了。 by:清楓 2012-05-04 青年節