3

我在这里和其他网站上阅读了很多关于浏览器检测与特征检测的帖子，并且我了解特征检测的所有优点。但是，我遇到了一个问题，浏览器检测可能是正确的答案。与其他浏览器相比，在 Safari 中测试我的网站的 HTML5 实现，我对加载时间感到震惊。对于我使用 HTML5 视频测试的特定页面，以下是加载时间：

铬：4 秒。火狐：3 秒。IE9：4 秒。Safari 5.1.7（PC版，试了3次）：1m 12s, 1m 4s, 1m 3s, 57s (?!?!)

我试图找到任何合理的解释，因为许多其他人在 Safari 中观察到了同样的问题（至少 v. 5.1.7），但没有出现我能找到的。即使 Safari 在技术上“支持”HTML5，我也不能凭良心把它留给我的观众。我已经有代码和媒体通过 SWFOBJECT 为不支持 HTML5 的浏览器提供 Flash 视频（通过“canPlayType”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&amp;csColor=333333&amp;csPreloader=demoAssessment_preload.swf&amp;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

4

1 回答 1

0

您可以使用它来检测浏览器。

var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('safari')!=-1){ 
  if(ua.indexOf('chrome')  > -1){
     alert("1") // chrome
  }else{
     alert("2") // saf
   }
}
于 2013-05-06T18:34:24.927 回答