すべてのコマンド (破棄、停止など) を単に無視する jQuery サイクルに問題があります。このページでは他にも多くのことが行われており、それが貢献している可能性がありますが、サンプル コードが多すぎるかどうかはわかりません。
簡単に言えば、ページの読み込み時に開始する 2 つの同時スライドショーがあり、「.video-trigger」をクリックすると、サイクル インスタンスが破棄されます。しかし、クリックすると、サイクルは循環し続けます (そして、それを置き換えるはずのビデオを覆い隠します)。
ソースを見つけるために考えられるすべてのシナリオを試しました—他のすべてのjavascriptを削除し(残りのサイクルと破棄クリックイベントのみ)、2つのスライドショーの1つだけを呼び出して破棄しようとします(両方ではなく) 、それらを別々のラッパーで呼び出します。これらのサイクル インスタンスの両方を削除し、非常に単純な「テスト」サイクルとクリック イベントをページのまったく別の部分に作成しましたが、これも破棄できませんでした。何が欠けているのかわからない。
ここで使用されている他の jQuery プラグインは videojs です。
これは、ビデオを含む無関係なファンシーボックスを除くすべてのスクリプトです. すべてを含めることが役立つ場合はお知らせください。
jQuery(document).ready(function($){
/// fading background images and video trigger
$('#background-image-wrapper,#trigger-fade').cycle();
// handle videos
$('.video-trigger').click(function() {
$('#background-image-wrapper,#trigger-fade').cycle('destroy');
var vidName = $(this).attr('id');
var vidID = 'video_' + vidName;
$('#background-image-wrapper').append('<div id="vid-cont" class="video-container"></div>');
$('#vid-cont').append('<video id="' + vidID + '" class="video-js vjs-default-skin" preload="auto" data-setup="{}">' +
'<source src="http://domain.com/wp-content/themes/sapporo/v/sapporo-'+ vidName +'.mp4" type="video/mp4">' +
'<source src="http://domain.com/wp-content/themes/sapporo/v/sapporo-'+ vidName +'.ogv" type="video/ogg">' +
'<source src="http://domain.com/wp-content/themes/sapporo/v/sapporo-'+ vidName +'.webm" type="video/webm">' +
'</video>');
//alert(vidID);
_V_(vidID).ready(function(){
var myPlayer = this;
var aspectRatio = 9/16;
function resizeVideoJS(){
//var width = document.getElementById(myPlayer.id).parentElement.offsetWidth; // Get the parent element's actual width -- this wasn't working with lower versions of FF
var width = document.getElementById('vid-cont').offsetWidth; // Get the parent element's actual width
myPlayer.width(width).height( width * aspectRatio ); // Set width to fill parent element, Set height
}
resizeVideoJS(); // Initialize the function
window.onresize = resizeVideoJS; // Call the function on resize
$('#trigger-fade').fadeOut();
$('#video-controls').fadeIn();
$('.video-container').css('left', '0');
myPlayer.volume(0);
myPlayer.play(); //start playing the video
var endedEvent = function(){
$('#video-controls').fadeOut(function(){ $('#trigger-fade').fadeIn(); });
$('.video-container').css('left', '-9999em');
$('.background-image').fadeIn('slow');
};
myPlayer.addEvent("ended", endedEvent);
$('#pause-video').click(function(){
myPlayer.pause();
$(this).fadeOut(function(){ $('#play-video').fadeIn(); });
});
$('#play-video').click(function(){
myPlayer.play();
$(this).fadeOut(function() { $('#pause-video').fadeIn(); });
});
$('#mute-video').click(function(){
myPlayer.volume(0);
$(this).fadeOut(function(){ $('#unmute-video').fadeIn(); });
});
$('#unmute-video').click(function(){
myPlayer.volume(.7);
$(this).fadeOut(function() { $('#mute-video').fadeIn(); });
});
$('#close-video').click(function(){
myPlayer.pause();
$('#video-controls').fadeOut(function(){ $('#trigger-fade').fadeIn(); });
$('.video-container').css('left', '-9999em');
$('.background-image').fadeIn('slow');
});
});
});
});
更新：問題の解決に近づいていません（CycleまたはCycle2を使用しているかどうかに関係なく発生します）。満足できない回避策を実装しました（ビデオの再生中にスライドショーがまだ実行されている間、スライドショーを非表示にするだけです）。しかし、サイクルをカスタマイズして別のクリックイベントで同じスライドショーを一時停止しようとした後、コマンドがトリガーされたときにコマンドが実行されず、以前にサイクルに設定したすべてのカスタムオプションが上書きされていることに気付きました.
つまり、次から始めると:
$('#background-image-wrapper,#trigger-fade').cycle({{timeout: 4000, speed: 7000}});
次に、クリック イベントでこれを使用します。
$('#background-image-wrapper,#trigger-fade').cycle('destroy');
また
$('#background-image-wrapper,#trigger-fade').cycle('pause');
次に、破棄または一時停止するのではなく、基本的に、「破棄/一時停止」が存在しないかのように、Cycle の新しいインスタンスを開始します。