logo标签列表

“特征检测”让我失望了。使用浏览器检测，还是有更好的方法吗？

javascriptsafarihtml5-videobrowser-detection
3

我已经阅读了这里和其他网站上关于浏览器检测与功能检测的许多文章，我理解所有特性检测的优点。然而，我遇到了一个问题，浏览器检测可能是正确的答案。在Safari中测试我的网站的HTML5实现与其他浏览器相比，我对加载时间感到恐惧。我测试了一张包含HTML5视频的特定页面，以下是加载时间：

Chrome：4秒。 Firefox：3秒。 IE9：4秒。 Safari 5.1.7（用PC测试了三次）：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
可能直接指向现场网站会更容易，该网站包含标记和客户端代码：http://www.davidkinsey.me/flash/scoringCourseAssessment/demoAssessment.htm（HTML是通过JS文件genVideo.js中的DOM脚本创建的）。 - user2209777
@用户：这就是为什么您需要在问题中发布它的原因：http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question - T.J. Crowder
嗨T.J.（以及其他人），抱歉我没有正确地插入和格式化代码。这不是懒惰，只是我没意识到，即使已经阅读了常见问题解答。我编辑了原始帖子，并加入了所有相关的代码。希望我的代码整体上能得到大家的认可，因为这个网站有很多优秀的程序员。再次感谢您提供的任何帮助-非常感激。 - user2209777
1个回答
0
您可以使用此功能来检测浏览器。
var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('safari')!=-1){ 
  if(ua.indexOf('chrome')  > -1){
     alert("1") // chrome
  }else{
     alert("2") // saf
   }
}
1
问题不是“如何检测浏览器”，而是“是否有一种特性检测的方法，而不是依赖于浏览器检测？” - T.J. Crowder
嗨，按照指示添加代码后，我没有看到任何响应。我想在我的原始问题中添加一个注释，而不是再次提问，看看是否有人可以提供意见。谢谢！ - user2209777
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接