一些網頁會有視頻的嵌套窗口，在電腦上可以播放，但是在手機上打開這個網頁，視頻那里就會顯示“插件不支持”的類似畫面。
代碼要怎樣寫才能實現既能在電腦上播放又可以在手機上播放呢？
HTML5
沒錯，使用html5就可以實現。但是你會問並不是所有的瀏覽器都支持html5啊，怎么辦？
沒事，我們可是使用折沖的方法對瀏覽器進行判斷。如果是電腦的瀏覽器，我們還是使用以前的代碼；如果是手機的瀏覽器。我們就使用html5。因為現在的智能手機的瀏覽器一般都支持html5的了。其實不支持html5的好像就ie9以下的瀏覽器了。
其中有一步驟很關鍵:就像為了使網頁能播放flv格式視頻而要在IIS添加MIME類型那樣需要在IIS增加對應的MIME類型。
下面來看看具體代碼怎樣寫。
視頻嵌套界面：
<div class="left"> <iframe id="rightPic" style="border:0;" scrolling="no" src="right.html" ></iframe> <iframe id="rightPic2" style="width:234px;height:180px; border:0;margin-left:-6px;margin-top:-8px; display:none;" scrolling="no" class="left" src="video.htm" ></iframe> </div>
判斷瀏覽器：
<script type="text/javascript"> //------------判斷瀏覽器----------- var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; //------------判斷瀏覽器----------- $(function () { $("#marquee").kxbdMarquee(); try { if (Sys.ie.toString() == "6.0") { //$("#mainRight").css("padding-left", "7"); $("#middlelogo div").attr("class", "left"); $("#rightlogo").css({ "width": "233", "margin-left": "3" }); $("#rightlogo div").attr("class", "left rightlogo"); $("#rightlogo img").css("width", "233"); $("#rightlogo div:first").attr("class", "left"); $("#rightPic").css({ "src": "right2.html", "width": "233", "margin-left": "0" }); $("#bottomlogo img").css("width", "796").attr("class", "left"); } else { } } catch (e) { } try { if (ua.indexOf('android') > -1 || ua.indexOf('linux') > -1) { $("#rightPic").css("display", "none"); $("#rightPic2").css("display", ""); } } catch (e) { } }); </script>
right.html文件：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title></title> <!--<link rel="stylesheet" type="text/css" href="css/default.css"> --> <!--<script type="text/javascript" src="js/slide.js"></script>--> </head> <body style="border: 0px; margin: 0; padding: 0px;"> <div id="bigpicarea" style="width:300px;height:180px;overflow:hidden ;" > <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="240" height="180"> <param name="movie" value="vcastr22.swf"/> <param name="quality" value="high"/> <param name="allowFullScreen" value="true" /> <param name="FlashVars" value="vcastr_file=MPEG.flv&IsAutoPlay=1" /> <embed src="vcastr22.swf" allowFullScreen="true" FlashVars="vcastr_file=MPEG.flv&IsAutoPlay=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="240" height="180"></embed> </object> </div> </body> </html>
video.htm文件：
<!DOCTYPE html> <html> <head> <title>Html5 video</title> </head> <body> <div style="margin-top:-40px; margin-left:-7px;"> <video controls="controls" autoplay="autoplay" width="240" height="220" style="margin-top:-40px;"> <source src="CQ.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> </div> </body> </html>
