由於html5的出現，讓網頁中的視頻、音頻有了更加便捷的實現方式。但是video、audio標簽只在IE 9+、Safari 3+、FireFox 4+、Opera 10+、Chrome 3+的瀏覽器版本得到了支持，並且各瀏覽器對於視頻編碼格式的支持不一致，這就需要我們考慮一個綜合的實現方案，使得視頻在不同瀏覽器中都能順利播放，而且在老版本的瀏覽器中也能得到支持。
以下是結合項目經驗，總結出的幾種方案，與大家分享。
方案1、使用VideoJS插件實現兼容 插件下載http://videojs.com
使用新版VideoJS插件需要注意的是其使用方法：
使用步驟一：head部分添加
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script>
說明：上述javascript代碼進適用於支持html5元素的IE版本，對於老版本的IE可以通過HTML5shiv來使不支持HTML5的瀏覽器支持HTML新標簽。htnl5shiv主要解決HTML5提出的新的元素不被IE6/IE7/IE8識別，這些新元素不能作為父節點包裹子元素，且不能應用CSS樣式。讓CSS 樣式應用在未知元素只需執行 document.createElement(elementName) 即可實現。html5shiv的工作原理也就是基於此。html5shiv的使用很簡單，由於IE9是支持html5的，故只需要在head中添加如下代碼即可：
<!–[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
使用步驟二：body顯示視頻部分添加
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="275" height="200" poster="http://www.feiliu.com/zt/img/20120417/preview.jpg" data-setup="{}">
<source src="http://www.feiliu.com/zt/video/mv00.mp4" type='video/mp4'/>
<source src="http://www.feiliu.com/zt/video/test2.webm" type='video/webm'/>
</video>
說明：這里的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部分添加如下代碼：
<link rel="stylesheet" href="css/video-js.css" type="text/css"/>
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
// Must come after the video.js library
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();//可選。不寫此函數默認為顯示播放控制條，鼠標移開隱藏
/* ============= OR ============ */
// Setup and store a reference to the player(s).
// Must happen after the DOM is loaded
// You can use any library's DOM Ready method instead of VideoJS.DOMReady
/*
VideoJS.DOMReady(function(){
// Using the video's ID or element
var myPlayer = VideoJS.setup("example_video_1");
// OR using an array of video elements/IDs
// Note: It returns an array of players
var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);
// OR all videos on the page
var myManyPlayers = VideoJS.setup("All");
// After you have references to your players you can...(example)
myPlayer.play(); // Starts playing the video for this player.
});
*/
/* ========= SETTING OPTIONS ========= */
// Set options when setting up the videos. The defaults are shown here.
/*
VideoJS.setupAllWhenReady({
controlsBelow: false, // Display control bar below video instead of in front of
controlsHiding: true, // Hide controls when mouse is not over the video
defaultVolume: 0.85, // Will be overridden by user's last volume if available
flashVersion: 9, // Required flash version for fallback
linksHiding: true // Hide download links when video is supported
});
*/
// Or as the second option of VideoJS.setup
/*
VideoJS.DOMReady(function(){
var myPlayer = VideoJS.setup("example_video_1", {
// Same options
});
});
*/
</script>
步驟二：在body顯示視頻位置添加如下代碼：
video id="example_video_1" class="video-js" width="280" height="210" controls preload="none" poster="http://www.feiliu.com/zt/img/20120417/img01.jpg">
<source src="http://www.feiliu.com/zt/video/mv01.mp4" type='video/mp4;' />
<source src="http://www.feiliu.com/zt/video/test2.webm" type='video/webm'/>
<object id="flash_fallback_1" class="vjs-flash-fallback" width="280" height="210" type="application/x-shockwave-flash" data="http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf">
<param name="movie" value="http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://www.feiliu.com/zt/img/20120417/img01.jpg", {"url": "http://www.feiliu.com/zt/video/mv01.flv","autoPlay":false,"autoBuffering":true}]}' />
<img src="http://www.feiliu.com/zt/img/20120417/img01.jpg" width="280" height="210" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
</div>
<!-- End VideoJS -->
</div>
說明：這段視頻代碼外層以一個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傳統標簽的代碼：
<div class="vd">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="280" height="210">
<param name="movie" value="http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2&isAutoPlay=false&isShowRelatedVideo=false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param value="true" name="allowfullscreen" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="flashvars" value="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999"/>
<embed height="210" align="middle" width="280" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="aprilfools" flashvars="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999" src="http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2&isAutoPlay=false&isShowRelatedVideo=false" menu="true" play="true" allowfullscreen="true" allowscriptaccess="sameDomain" quality="high" wmode="transparent" bgcolor="#fff" ver="10.0.0"></embed>
</object>
</div>
說明：這里使用的優酷的視頻迷你播放器，減小了播放控制條的顯示大小，比優酷普通播放器的畫面大一些，用戶體驗好一些。
頁面二針對mac設備代碼：
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="280" height="210" poster="http://www.feiliu.com/zt/img/20120417/preview.jpg" data-setup="{}">
<source src="http://www.feiliu.com/zt/video/mv01.mp4" type='video/mp4'/>
</video>
說明：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/
統一采用優酷地址的好處是保證了兩個頁面的一致性，又減輕自己服務器壓力，而且可以與優酷合作更好的營銷。
頁面訪問的設備檢測代碼如下：
<script type="text/javascript">
if ((/iPhone|iPad|iPod/i).test(navigator.userAgent) || (/Mac68K|MacPPC|Macintosh|MacIntel/i).test(navigator.platform)){
window.location.href = "####page2.html"
}
</script>
補充：安卓系統從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部分加入如下腳本
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
你可以通過使用IE條件注釋的方法，只在舊版IE瀏覽器中加載這條JS腳本。
2、然后在body部分使用audio或video標簽，添加音頻視頻相關代碼。
<!-- 視頻媒體標簽 -->
<video src="http://www.feiliu.com/zt/video/mv02.mp4" width="480" height="320" controls preload></video>
<!-- 音頻媒體標簽 -->
<audio src="http://www.feiliu.com/zt/audio/test.mp3" controls loop></audio>
這樣你便可以在IE6-IE8瀏覽器中使用audio和video標簽了。
轉自：http://blog.csdn.net/freshlover/article/details/7535785