0
我正在尋找包含YouTube視頻的幻燈片幻燈片。它應該：播放YouTube視頻時鼠標懸停 JQuery Cycle Plugin無意中恢復
- 暫停
- 包含分頁
我用的JQuery Cycle插件的幻燈片。 http://jquery.malsup.com/cycle/
和使用YouTube的iframe的API https://developers.google.com/youtube/iframe_api_reference
幻燈片放映暫停和繼續正常的視頻播放/暫停;但是，如果您將鼠標移到視頻幻燈片上，它將會恢復。
有沒有什麼辦法可以防止使用JQuery Cycle Plugin？
謝謝。
<!-- added to example from http://jquery.malsup.com/cycle/ -->
<html>
<head>
<title>JQuery Cycle Plugin - with YouTube</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
/* slideshow pagination */
#nav_slideshow { width: 232px; margin: auto }
#nav_slideshow a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px; }
#nav_slideshow a.activeSlide { background: #ea0 }
#nav_slideshow a:focus { outline: none; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
var theslideshow;
$(document).ready(function() {
theslideshow = $(".slideshow")
.before('<div id="nav_slideshow">')
.cycle({
fx: 'fade',
pause: true, // pause on mouseover - will still fire resume
// after cycle('pause') is called to play video
// then if user leaves YouTube's iframe it resumes slideshow
timeout: 2500,
speed: 2500,
sync: 1,
pager: '#nav_slideshow'
});
});
// Access YouTube's APIs
// https://developers.google.com/youtube/iframe_api_reference
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
// pause slide show when youtube video is playing <-- not working yet!
// mouseout event triggers resume in Cycle's pause on mouseover
function onPlayerStateChange(event){
console.log(event.data);
if(event.data == '1') {
theslideshow.cycle('pause');
} else if((event.data == '0') || (event.data == '2')) {
theslideshow.cycle('resume');
}
}
</script>
</head>
<body>
<div class="slideshow">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
<iframe id="player" width="560" height="315" src="http://www.youtube.com/embed/7CGQzQuH4X4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>