您好我已经构建了一个需要显示多个视频的页面。它会测试是否可以在浏览器中播放视频（mp4格式），如果是，则构建HTML5视频标签。如果视频无法在浏览器中本地播放，则它将回退到闪存。我遇到的问题是，如果它无法播放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>
答案 0 :(得分：1)
您可以定义简单的加载器对象，如：
var SwfLoader = {
requestSend: false,
hasResponse: false,
callbacks: [],
bind: function (func) {
if (this.hasResponse) {
func();
return;
}
this.callbacks.push(func);
if (!this.requestSend) this.sendRequest();
},
sendRequest: function () {
this.requestSend = true;
$.ajax({
// ....
// Your request parameters here
// ....
success:function () {
this.hasResponse = true;
SwfLoader.executeHandlers();
}
});
},
executeHandlers: function () {
for (var i = 0; i < this.callbacks.length; i++) {
this.callbacks[i]();
}
}
};
然后在浏览器无法播放电影时使用SwfLoader.bind(function () {/* you code to setup flash player */});