2
브라우저 감지 및 기능 감지에 관한 여러 게시물을 다른 사이트에서 읽었으며 모든 기능 감지에 대해 알고 있습니다. 그러나 브라우저 감지가 올바른 대답 일 수있는 문제가 발생했습니다. Safari에서 내 사이트의 HTML5 구현을 다른 브라우저와 비교하여 테스트 한 결과로드 시간에 놀라움을 금치 못합니다. HTML5 동영상으로 테스트 한 특정 페이지의로드 시간은 다음과 같습니다."기능 감지"는 나를 실망시킵니다. 브라우저 검색을위한 경우 또는 더 좋은 방법이 있습니까?
Chrome : 4 초. Firefox : 3 초 IE9 : 4 초. Safari 5.1.7 (PC 용, 3 회 시도) : 1m 12s, 1m 4s, 1m 3s, 57s (?!?!)
많은 사람들이 동일한 문제를 발견 했으므로 합리적인 설명을 찾으려고 노력했습니다. 사파리 (최소한 5.1.7 절)에서 발견되었지만 내가 찾을 수있는 것은 아무것도 없었다. 사파리가 HTML5를 기술적으로 "지원"한다고하더라도, 나는 양심적으로 그것을 내 시청자에게 남겨 둘 수는 없습니다. HTML5를 지원하지 않는 브라우저 (예 : "canPlayType"JS 검사)에서 SWFOBJECT를 통해 Flash 비디오를 제공하는 코드 및 미디어가 이미 있습니다. 다른 제안은 받아 들일 수 있지만, 현재로서는 Safari 사용자를 위해 특별히 Flash 비디오를 제공해야합니다. 필자는 브라우저 탐지 코드를 작성/테스트 한 적이 결코 없으며, hinky 프로세스라는 것을 알고 있습니다. 따라서 이것이 최선의 경로라면, 이것에 가장 적합한 JavaScript 코드는 무엇입니까? 고려해야 할 더 나은 솔루션이 있다면, 꼭 따라 가야합니다!
<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 플래시 비디오에 대한 동적 대체 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>
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 파일의 DOM 스크립팅을 통해 genVideo.js) – user2209777
@ 사용자 : 이유 **에 질문 **에 게시해야합니다 : http://meta.stackexchange.com/questions/118392/add-stack-overfow- faq-entry-or-similar-for-question-in-the-question –
안녕하세요. TJ (et al), 코드를 삽입하고 올바르게 포맷하지 못해 죄송합니다. 그것은 게으름이 아니었다, 나는 단지 깨닫지 못했다. 심지어 FAQ를 읽었다. 나는 관련 코드 전부를 가진 원래 포스트를 편집했다. 이 사이트에 위대한 프로그래머가 있기를 바랍니다. 제공 할 수있는 도움에 다시 한 번 감사드립니다 - 크게 감사드립니다. – user2209777