当前位置：首页 → 问答吧 → pc和apple移动设备的视频播放兼容

pc和apple移动设备的视频播放兼容

时间：2010-09-26

来源：互联网

apple在iphone pad中不打算支持flash，视频播放只能靠html5 video了。怎么在一套页面下做兼容？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jerry Qu's HTML document</title> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta http-equiv="ImageToolbar" content="no" /> <style type="text/css" title="default" media="screen"> /*<![CDATA[*/ /*]]>*/ </style> </head> <body> <script type="text/javascript"> var playerPc = '<embed width="970" height="520" align="middle" ipad="true" flashvars="hideZoomBtn=0&vid=89580&pid=57&ptype=2&albumId=9972&tvId=41941" bgcolor="#000000" id="flash" src="http://www.qiyi.com/player/20100919234341/qiyi_player.swf" type="application/x-shockwave-flash" menu="true" allowscriptaccess="always" allowfullscreen="true" devicefont="false" scale="showall" quality="hight" play="true" loop="true" pluginspage="http://www.macromedia.com/go/getflashplayer">'; var playerMobile = '<video width="970" height="520" autoplay="autoplay" controls="controls" id="video" tabindex="0"><source type="video/mp4" src="http://61.55.174.130/videos/movie/20100919/7d9b89f25ef75ff72f4426abfc505b81.mp4?key=b6dcfcb074aa275d"></source></video>'; </script> <div id="player"> </div> <script type="text/javascript"> //<![CDATA[ /** * @module kissy-ua * @author [email protected] */ var UA = function(){ var ua = navigator.userAgent, m, o = { webkit: 0, chrome: 0, safari: 0, gecko: 0, firefox: 0, ie: 0, opera: 0, mobile: '' }, numberify = function(s) { var c = 0; // convert '1.2.3.4' to 1.234 return parseFloat(s.replace(/\./g, function() { return (c++ === 0) ? '.' : ''; })); }; // WebKit if ((m = ua.match(/AppleWebKit\/([\d.]*)/)) && m[1]) { o.webkit = numberify(m[1]); // Chrome if ((m = ua.match(/Chrome\/([\d.]*)/)) && m[1]) { o.chrome = numberify(m[1]); } // Safari else if ((m = ua.match(/\/([\d.]*) Safari/)) && m[1]) { o.safari = numberify(m[1]); } // Apple Mobile if (/ Mobile\//.test(ua)) { o.mobile = 'Apple'; // iPad, iPhone or iPod Touch } // Other WebKit Mobile Browsers else if ((m = ua.match(/NokiaN[^\/]*|Android \d\.\d|webOS\/\d\.\d/))) { o.mobile = m[0]; // Nokia N-series, Android, webOS, ex: NokiaN95 } } // NOT WebKit else { // Opera if ((m = ua.match(/Opera\/.* Version\/([\d.]*)/)) && m[1]) { o.opera = numberify(m[1]); // Opera Mini if ((ua.match(/Opera Mini[^;]*/))) { o.mobile = m[0]; // ex: Opera Mini/2.0.4509/1316 } // NOT WebKit or Opera } else { // MSIE if ((m = ua.match(/MSIE\s([^;]*)/)) && m[1]) { o.ie = numberify(m[1]); // NOT WebKit, Opera or IE } else { // Gecko if ((m = ua.match(/Gecko/))) { o.gecko = 1; // Gecko detected, look for revision if ((m = ua.match(/rv:([\d.]*)/)) && m[1]) { o.gecko = numberify(m[1]); } // Firefox if ((m = ua.match(/Firefox\/([\d.]*)/)) && m[1]) { o.firefox = numberify(m[1]); } } } } } return o; }(); if (UA.mobile === "Apple") { alert('哇，你用的是Iphone Ipad Itouch哦！'); document.getElementById('player').innerHTML = playerMobile; console.log(playerMobile); }else{ alert('你还是用flash吧！'); document.getElementById('player').innerHTML = playerPc; console.log(playerPc); } /** * NOTES: * * 2010.03 * - jQuery, YUI 等类库都推荐用特性探测替代浏览器嗅探。特性探测的好处是能自动适应未来设备和未知设备，比如 * if(document.addEventListener) 假设 IE9 支持标准事件，则代码不用修改，就自适应了“未来浏览器”。 * 对于未知浏览器也是如此。但是，这并不意味着浏览器嗅探就得彻底抛弃。当代码很明确就是针对已知特定浏览器的， * 同时并非是某个特性探测可以解决时，用浏览器嗅探反而能带来代码的简洁，同时也也不会有什么后患。总之，一切 * 皆权衡。 * - UA.ie && UA.ie < 8 并不意味着浏览器就不是 IE8, 有可能是 IE8 的兼容模式。进一步的判断需要使用 documentMode. * * TODO: * - test mobile * - 是否需要加入 maxthon 等国内浏览器嗅探？ * */ //]]> </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: greengnn 发布时间: 2010-09-26

不错！学习了

作者: dishuipiaoxiang 发布时间: 2010-09-26

pc和apple移动设备的视频播放兼容

热门阅读

热门下载