嗨，我已经建立了一个需要显示多个视频的页面。它测试是否可以在浏览器中播放视频（mp4 格式），如果可以，将构建一个 HTML5 视频标签。如果视频不能在浏览器中本地播放，那么它将回退到 Flash。我遇到的问题是，如果它不能播放 Mp4 文件，我必须加载 swfobject.js 文件来设置 Flash 播放器——但我只想这样做一次。
我将 swfObjLoaded 的全局变量设置为 false，然后尝试在脚本上执行 ajax 加载。但是 swfobject 脚本似乎加载得很慢，因此 swf 的注册正试图在脚本完全加载之前发生。因此，我尝试使用 setInterval 反复检查 swfObjLoaded 是否设置为 true 以及是否取消间隔并运行 setupFlash 函数。
这根本不起作用，似乎正在挂起我的浏览器。任何人都知道执行此操作的最佳方法。我知道 jQuery 延迟函数可能真的可以帮助我，但不幸的是，我坚持使用不包含延迟函数的 jQuery 1.3.2。有任何想法吗？
这是我的代码：
<html>
<head>
<title>HTML5 multiple videos test</title>
<script type="text/javascript" src="http://media.topshop.com/javascript/3.3.2.3/lib/jquery/jquery.js"></script>
</head>
<body>
<div style="width: 640px; height: 360px;">
<div style="background-color: #ffe9db; width: 100%; height: 100%;">
<div class="video_container_1" style="display: block; width: 420px; height: 236px;">
<a class="html5_vid" href="http://media.topshop.com/cms/pages/static/static-0000035506/flash/topshop_unique_2012_420x236.mp4">
<img src="http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000035506/images/VIDEO_LEFT.jpg" alt="Download the Nick Knight video" />
</a>
</div>
</div>
</div>
<div style="width: 640px; height: 360px;">
<div style="background-color: #ffe9db; width: 100%; height: 100%;">
<div class="video_container_2" style="display: block; width: 407px; height: 224px;">
<a class="html5_vid" href="http://www.topshop.com/cms/pages/static/static-0000035506/flash/NEW_MAKEUP-HAIR-NAILS_02_a420X236.mp4">
<img src="http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000035506/images/VIDEO_RIGHT.jpg" alt="Download the Nick Knight video" />
</a>
</div>
</div>
</div>
<script type="text/javascript">
var vidLink = $("a.html5_vid"),
canPlay = false,
v = document.createElement("video"),
vidCounter = 1,
swfObjLoaded = false,
interval,
flashCode = '<object id="flash_vid_vidCount" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="vidWidth" height="vidHeight"><param name="movie" value="http://media.topshop.com/flash_content/player_page/videoPlayer.swf" \/><param name="allowFullScreen" value="true" \/><param name="allowScriptAccess" value="always" \/><param name="wmode" value="transparent" \/><param name="bgcolor" value="#ffffff" \/><param name="FlashVars" value="source=vidUrl&still=posterUrl" \/><object width="vidWidth" height="vidHeight" type="application/x-shockwave-flash" flashvars="source=vidUrl&still=posterUrl" data="http://media.topshop.com/flash_content/player_page/videoPlayer.swf" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" bgcolor="#ffffff"><a title="Get Flash Player" href="http://www.adobe.com/go/getflashplayer"><img src="posterUrl" border="0" alt="Get Flash Player" width="vidWidth" height="vidHeight" \/><\/a><\/object><\/object>';
if(v.canPlayType && v.canPlayType("video/mp4").replace(/no/, "")) {
canPlay = true;
} else {
$.ajax({
url: 'http://media.topshop.com/javascript/behaviour/swfobject.js',
dataType: "script",
async: false,
success: function() {
console.log("loaded the file via ajax");
swfObjLoaded = true;
}
});
}
$.each(vidLink, function() {
var currentLink = $(this);
currentLink.css("display", "none");
var vidUrl = currentLink.attr("href"),
posterUrl = currentLink.children("img").attr("src"),
vidContainer = currentLink.parent(),
vidContainerParent = vidContainer.parent(),
vidWidth = vidContainer.css("width").replace("px", ""),
vidHeight = vidContainer.css("height").replace("px", "");
if (canPlay === true) {
console.log("canPlay is true");
newVid = document.createElement("video");
currentLink.replaceWith(newVid);
$("div.video_container_" + vidCounter + " video").attr({id: "html_vid_" + vidCounter, controls: "controls", width: vidWidth, height: vidHeight}).append("<source src=" + vidUrl + " \/>");
if(!$("div.video_container_" + vidCounter + " video").children("source").length) {
$("div.video_container_" + vidCounter + " video").attr("src", vidUrl );
}
if (navigator.userAgent.toLowerCase().search("android") > -1) {
var vid = document.getElementById("html_vid_" + vidCounter);
vid.onclick = function() {
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
}
}
} else {
console.log("canPlay is false");
function setupFlash() {
vidContainerParent.hide();
var tempFlashCode = flashCode.replace(/vidCount/g, vidCounter);
tempFlashCode = tempFlashCode.replace(/vidWidth/g, vidWidth);
tempFlashCode = tempFlashCode.replace(/vidHeight/g, vidHeight);
tempFlashCode = tempFlashCode.replace(/vidUrl/g, vidUrl);
tempFlashCode = tempFlashCode.replace(/posterUrl/g, posterUrl);
swfobject.registerObject("flash_vid_" + vidCounter, "9.0.0");
currentLink.replaceWith(tempFlashCode);
vidContainerParent.show();
}
function checkSwfObj() {
if (swfObjLoaded !== true) {
console.log("still not loaded");
var timer = setInterval(function(){checkSwfObj()},100);
} else {
console.log("bloody thing is finally loaded");
clearInterval(timer);
setupFlash();
}
}
checkSwfObj();
}
vidCounter++;
});
</script>
</body>
</html>