こんにちは、複数のビデオを表示する必要があるページを作成しました。動画がブラウザー (mp4 形式) で再生できるかどうかをテストし、再生できる場合は HTML5 ビデオ タグを作成します。ビデオがブラウザでネイティブに再生できない場合は、フラッシュにフォールバックします。私が抱えている問題は、Mp4 ファイルを再生できない場合、swfobject.js ファイルをロードしてフラッシュ プレーヤーをセットアップする必要があることですが、これは 1 回だけ実行したいと考えています。
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>