我在这里和其他网站上阅读了很多关于浏览器检测和功能检测的帖子，我了解了功能检测的所有优点。但是，我遇到了浏览器检测可能是正确答案的问题。与其他浏览器相比，在Safari中测试我网站的HTML5实现，我对加载时间感到震惊。对于我使用HTML5视频测试的特定页面，以下是加载时间：
Chrome：4秒。 Firefox：3秒。 IE9：4秒。 Safari 5.1.7（适用于PC，尝试过三次）：1m 12s，1m 4s，1m 3s，57s（？！？！）
我试图找到任何合理的解释，因为许多其他人在Safari中观察到同样的问题（至少在5.1.7版本中），但没有一个我能找到。即使Safari在技术上支持＆＃34; HTML5，我不能在良心上为我的观众留下这样的感觉。我已经有代码和媒体通过SWFOBJECT为不支持HTML5的浏览器提供Flash视频（通过＆＃34; canPlayType＆＃34; JS检查触发）。我对其他建议持开放态度，但此时似乎我还需要专门为Safari用户提供Flash视频。我从来没有编写/测试过浏览器检测代码，我知道它是一个简单的过程。那么，如果这是最好的路线，那么最好的JavaScript代码是什么？如果有一个更好的解决方案，我应该考虑，然后通过一切手段传递它！
以下是我的JS为支持HTML5视频的浏览器提供的动态HTML：
<html><head>
<meta charset="UTF-8">
<meta content="David Kinsey" name="author">
<meta content="David Kinsey" name="designer">
<meta content="general" name="rating">
<meta content="noindex,nofollow" name="robots">
<title>David Kinsey: Volleyball Scorekeeping Assessment Demo</title>
<!-- global stylesheets -->
<link href="/css/layers.css" type="text/css" rel="stylesheet">
<link href="/css/layout.css" type="text/css" rel="stylesheet">
<link href="/css/nav.css" type="text/css" rel="stylesheet">
<!-- scaleSWF css
<link rel="stylesheet" type="text/css" href="/css/scaleSWF.css" /> -->
<script src="/javascript/global.js" type="text/javascript"></script>
<script src="/javascript/swfobject.js" type="text/javascript"></script>
<script src="/javascript/genVideo.js" type="text/javascript"></script>
</head>
<body id="defaultBody">
<!-- create top banner full-width of page -->
<div id="banner_top">
<script src="/javascript/genHeader.js" type="text/javascript"></script><div id="banner_bar"></div><img alt="Banner graphic of my name, David Kinsey" src="/images/bannerMyName.png" id="banner_myname"><a href="http://www.davidkinsey.me/index.htm" class="noOutline" id="homeLink"><img "="" alt="Logo of my initials, DLK" src="/images/DLKlogo-SMALL.png" class="noOutline" id="DLKlogo"></a><img alt="Banner graphic of my title, Instructional Designer" src="/images/instructDesigner.png" id="banner_title">
</div>
<video width="826" height="616" id="videoTag" preload="auto" controls="controls" poster="/images/logoAnimationStill.png" class="centeredMedia" autoplay="true" tabindex="0" style="visibility: visible;">
<source src="http://www.davidkinsey.me/video/demoAssessment.mp4" type="video/mp4"></source>
<source src="http://www.davidkinsey.me/video/demoAssessment.webm" type="video/webm"></source>
</video>
</body>
</html>
以下是SWFOBJECT Flash视频的动态替代HTML：
<html><head>
<meta charset="UTF-8">
<meta content="David Kinsey" name="author">
<meta content="David Kinsey" name="designer">
<meta content="general" name="rating">
<meta content="noindex,nofollow" name="robots">
<title>David Kinsey: Volleyball Scorekeeping Assessment Demo</title>
<!-- global stylesheets -->
<link href="/css/layers.css" type="text/css" rel="stylesheet">
<link href="/css/layout.css" type="text/css" rel="stylesheet">
<link href="/css/nav.css" type="text/css" rel="stylesheet">
<!-- scaleSWF css
<link rel="stylesheet" type="text/css" href="/css/scaleSWF.css" /> -->
<script src="/javascript/global.js" type="text/javascript"></script>
<script src="/javascript/swfobject.js" type="text/javascript"></script>
<script src="/javascript/genVideo.js" type="text/javascript"></script>
</head>
<body id="defaultBody">
<!-- create top banner full-width of page -->
<div id="banner_top">
<script src="/javascript/genHeader.js" type="text/javascript"></script><div id="banner_bar"></div><img alt="Banner graphic of my name, David Kinsey" src="/images/bannerMyName.png" id="banner_myname"><a href="http://www.davidkinsey.me/index.htm" class="noOutline" id="homeLink"><img "="" alt="Logo of my initials, DLK" src="/images/DLKlogo-SMALL.png" class="noOutline" id="DLKlogo"></a><img alt="Banner graphic of my title, Instructional Designer" src="/images/instructDesigner.png" id="banner_title">
</div>
<object width="805.2389380530973" height="616" type="application/x-shockwave-flash" data="demoAssessment_controller.swf" id="flashcontent" style="visibility: visible;" class="centeredMedia" autoplay="true">
<param name="bgcolor" value="333333">
<param name="quality" value="best">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="csConfigFile=demoAssessment_config.xml&csColor=333333&csPreloader=demoAssessment_preload.swf&csFilesetBookmark=0">
</object>
</body>
</html>
以下是相关的JavaScript代码：
function addVideoSources(pageName, vid) {
var newMP4 = document.createElement("source");
var newWebm = document.createElement("source");
newMP4.setAttribute("src", containerID + pageName + ".mp4");
newMP4.setAttribute("type", "video/mp4");
newWebm.setAttribute("src", containerID + pageName + ".webm");
newWebm.setAttribute("type", "video/webm");
vid.appendChild(newMP4);
vid.appendChild(newWebm);
}
function addVideoAttributes(pageName, vid) {
vid.setAttribute("id", "videoTag");
vid.setAttribute("preload", "auto");
vid.setAttribute("controls", "controls");
vid.setAttribute("poster", "/images/logoAnimationStill.png");
if (pageName != "index") {
vid.setAttribute("class", "centeredMedia");
vid.setAttribute("autoplay", "true");
} else {
vid.setAttribute("class", "rightSideMedia");
}
vid.addEventListener('loadstart', loadstarted, false);
vid.addEventListener('loadedmetadata',
function() {
if (document.getElementById("noJavaScript")) {
obj = document.getElementById("noJavaScript");
obj.parentNode.removeChild(obj);
}
sizeVideo(pageName, this, this.videoWidth, this.videoHeight, this.offsetTop);
}, false);
vid.addEventListener('error', failed, false);
}
function appendVideoObj(vidObj) {
var contentCol = document.getElementById("contentCol");
if (contentCol) {
contentCol.insertBefore(vidObj, contentCol.firstChild);
} else {
document.body.appendChild(vidObj);
}
}
function insertHTML5Video() {
var newVid = document.createElement("video");
var pageName = getPageName();
addVideoAttributes(pageName, newVid);
addVideoSources(pageName, newVid);
appendVideoObj(newVid);
}
function swfObjectLoadedHandler(e) {
// alert("e.success = " + e.success +"\ne.id = "+ e.id +"\ne.ref = "+ e.ref);
var obj = new Object();
var pageName = getPageName();
if (pageName != "index") {
e.ref.setAttribute("class", "centeredMedia");
e.ref.setAttribute("autoplay", "true");
} else {
e.ref.setAttribute("class", "rightSideMedia");
}
if (e.success) {
if (document.getElementById("noJavaScript")) {
obj = document.getElementById("noJavaScript");
obj.parentNode.removeChild(obj);
}
sizeVideo(pageName, e.ref, e.ref.width, e.ref.height, e.ref.offsetTop);
} else {
obj = document.getElementById("videoLayer");
alert("Movie load failed. Please try again by refreshing your browser.");
}
}
function insertSWFobject() {
var flashcontent = document.createElement("div");
var req = swfobject.hasFlashPlayerVersion("9.0.115");
var bookmark = args.movie ? args.movie : 0;
var pageName = getPageName();
var cs_noexpressUpdate = document.createElement("div");
var noFlashPlayerPara = document.createElement("p");
var noFlashPlayerText1 = document.createTextNode("I'm sorry, but the video content for this page requires Adobe Flash Player® version 9 or higher to be installed on your computer. You can download the latest version of Flash Player® for free by visiting ");
var flashPlayerLink = document.createElement("a");
var noFlashPlayerLinkText = document.createTextNode("Adobe's Flash Player® download page");
var noFlashPlayerText2 = document.createTextNode('. If you have the player installed, verify that your browser has JavaScript enabled. You can find easy-to-follow instructions how to do this by using Google® with the words "enable JavaScript" in the search box. Thank you!');
flashcontent.setAttribute("id", "flashcontent");
flashcontent.setAttribute("class", "noJavaScript");
appendVideoObj(flashcontent);
if (req ) {
swfobject.embedSWF(pageName + "_controller.swf", "flashcontent", vidSpecs[pageName].width, vidSpecs[pageName].height, "9.0.115", null, { csConfigFile: pageName + "_config.xml", csColor: "333333", csPreloader: pageName + "_preload.swf", csFilesetBookmark: bookmark }, { bgcolor: "333333", quality: "best", allowscriptaccess: "always" }, null, swfObjectLoadedHandler );
} else {
flashPlayerLink.setAttribute("href", "http://www.adobe.com/go/getflashplayer");
flashPlayerLink.appendChild(noFlashPlayerLinkText);
noFlashPlayerPara.setAttribute("class","noFlashPlayerText");
noFlashPlayerPara.appendChild(noFlashPlayerText1);
noFlashPlayerPara.appendChild(flashPlayerLink);
noFlashPlayerPara.appendChild(noFlashPlayerText2);
flashcontent.appendChild(noFlashPlayerPara);
}
}
function getClientWidth() {
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}
function getClientHeight() {
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}
function onloadHandler() {
var obj = document.getElementById("noJavaScript");
var vidElem = document.createElement("video");
getBrowserInfo();
obj.parentNode.removeChild(obj);
if ((vidElem.canPlayType) && uaNotSafari()) { // if browser has HTML5 video support and is NOT CRAPFARI use HTML5 video
insertHTML5Video()
} else { // no video tag support; use SWFobject
insertSWFobject(); // otherwise use Flash video via SWFOBJECT
}
} /* END onloadHandler */
addLoadEvent(onloadHandler); // requires global.js to be included in same document
谢谢， - DK
答案 0 :(得分：0)
您可以使用它来检测浏览器。
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari')!=-1){
if(ua.indexOf('chrome') > -1){
alert("1") // chrome
}else{
alert("2") // saf
}
}