3

ここや他のサイトで、ブラウザー検出と機能検出に関する多くの投稿を読み、機能検出の長所をすべて理解しています。ただし、ブラウザーの検出が正しい答えである可能性があるという問題に遭遇しました。私のサイトの HTML5 実装を Safari で他のブラウザーと比較してテストしたところ、ロード時間に恐怖を感じました。HTML5 ビデオでテストした特定のページの読み込み時間は次のとおりです。

クロム: 4 秒。Firefox: 3 秒。IE9: 4 秒。Safari 5.1.7 (PC用、3回試行): 1分12秒、1分4秒、1分3秒、57秒(?!?!)

他の多くの人が Safari (少なくとも v. 5.1.7) で同じ問題を観察しているため、合理的な説明を見つけようとしましたが、私が見つけることができるものはありませんでした。Safari は技術的には HTML5 を「サポート」していますが、私は良心的に、閲覧者のためにこのままにしておくことはできません。HTML5 をサポートしていないブラウザー用に SWFOBJECT を介して 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 に答える