ビデオが再生されるとき、またはビデオを表示するスライドに到達したときに一時停止する必要があるjqueryサイクルスライダーがあります。(これらのオプションはどちらでも問題ありませんが、特定のクラスまたはIDでスライドを一時停止する方法がわかりませんでした。)video.jsを使用してビデオを表示しています。
再生を押すとビデオの再生が始まりますが、マウスをビデオから離すと自動的に次のスライドに移動します。ポケットベルのサムネイルをクリックすると一時停止したままになりますが、スライドショーが正常に進行して再生を押すと、サイクル「タイムアウト」で設定されたルールに従います。
私が探しているのは、ビデオの再生時にスライドショーを一時停止する方法です。ビデオの再生が開始されたときにイベントを呼び出すか、ビデオスライドに到達したときにスライドショーを完全に一時停止します。
私はこれを頭の中に持っています:
<script>
jQuery(document).ready(function($) {
$(".project_slides").cycle({
fx:'fade',
timeout: 5000,
prev : '#prev',
next : '#next',
pager : '#pager',
pause: 1,
pagerAnchorBuilder: function(idx, slide) {
return '#pager li:eq(' + (idx) + ') a';
}
});
$('#pager a').click(function() {
$('.project_slides').cycle('pause');
});
function pauseitall() {
$('.project_slides').cycle('pause');
}
});
</script>
そして体内で:
<div class="project_slides">
<div class="slide">
<img src="/media/{{ Slide.media }}" alt="{{ Slide.caption }}" />
</div>
<div class="slide">
<video id="video_11"
class="video-js vjs-default-skin"
controls width="512"
height="406"
poster="/media/images/video-poster.png"
preload="auto" loop>
<source type="video/mp4" src="/media/{{ Slide.media }}">
</video>
<script>
$(function() {
_V_("video_11").ready(function() {
var myPlayer = this;
addEvent(myPlayer.video, "play", function () {
pauseitall()}, false);
myPlayer.play();
});
});
</script>
</div>
</div>
明らかに、pauseitall()関数は適切に呼び出されていませんが、私はこれに長い間(非常に多くの反復で)苦労していたので、最終的にここに投稿して、誰かが解決策を知っているかどうかを確認したいと思いました。
参考までに、jQuery 1.7.2、jquery cycle 2.9999.5、およびVideo.js3.2.0を使用します。