Използвам jQuery плъзгач на моя сайт, който позволява вграждането на Vimeo видеоклипове и се чудех как мога да направя така, че ако някой щракне върху „пусни“ на vimeo видеоклипа, плъзгачът да спре да се върти автоматично, докато видеоклипът приключи или докато потребителят щракне върху „пауза“. Предполагам, че ще трябва да се докосна до API на Vimeo, за да постигна това. Ето моя код на плъзгача, всяка помощ ще бъде високо оценена!
АКТУАЛИЗАЦИЯ Реших това с помощта на Тревър, ето кода за плъзгача:
var slideInProgress = 0;
var currentSlideIndex = 0,
slides;
var playing = false;
function setTopSlider() {
if (jQuery('#top_slider #container .slide').length != 0) {
slides = jQuery('#top_slider #container > .slide');
for (var i = 0; i <= slides.length; i++) {
jQuery(slides[i]).css('left', '100%');
}
;
jQuery(slides[currentSlideIndex]).css('left', '0%');
var el = jQuery('.dot:eq(' + currentSlideIndex + ')');
src = el.css("background-image").replace("_off", "_over");
el.css("background-image", src);
el.addClass('active');
};
};
function slide(dir) {
if (slideInProgress != 0) {
return;
}
slideInProgress = 3;
var current, next, nextSlide;
var slideSpeed = 200;
current = jQuery(slides[currentSlideIndex]);
if (!isNaN(dir)) {
next = dir;
if (next > currentSlideIndex)
dir = 'left';
else
dir = 'right';
};
if (dir == 'left') {
if (!next) {
next = currentSlideIndex + 1;
if (next >= slides.length) {
next = 0;
}
}
nextSlide = jQuery(slides[next]);
nextSlide.css('left', '100%');
nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);
//nextSlide.animate({left: '0%'}, 1500);
nextSlide.animate({
left: '0%'
}, {
duration: slideSpeed,
complete: function() {
slideInProgress--;
}
});
//current.animate({left: '-100%'}, 1500);
current.animate({
left: '-100%'
}, {
duration: slideSpeed,
complete: function() {
slideInProgress--;
}
});
} else {
console.log('moving right');
if (!next) {
next = currentSlideIndex - 1;
if (next < 0) {
next = slides.length - 1;
}
}
nextSlide = jQuery(slides[next]);
nextSlide.css('left', '-100%');
nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);
//nextSlide.animate({left: '0%'}, 1500);
nextSlide.animate({
left: '0%'
}, {
duration: slideSpeed,
complete: function() {
slideInProgress--;
}
});
//current.animate({left: '100%'}, 1500);
current.animate({
left: '100%'
}, {
duration: slideSpeed,
complete: function() {
slideInProgress--;
}
});
}
current.addClass('active');
nextSlide.removeClass('active');
var el = jQuery('.dot:eq(' + currentSlideIndex + ')');
src = el.css("background-image").replace("_over", "_off");
el.css("background-image", src);
el.removeClass('active');
el = jQuery('.dot:eq(' + next + ')');
src = el.css("background-image").replace("_off", "_over");
el.css("background-image", src);
el.addClass('active');
console.log('currentSlideIndex' + currentSlideIndex);
console.log('next' + next);
console.log('dir' + dir);
currentSlideIndex = next;
// **** //
slideInProgress--;
// **** //
}
setTopSlider();
playing = setInterval(function() {slide('left')}, 6000);
И как го свързах с API на Vimeo:
(function () {
var $=jQuery;
var f = $('iframe');
var url = f.attr('src').split('?')[0]; <?php //HACK! had to hard code the protocol in here or postMethod shows error: Uncaught SyntaxError: An invalid or illegal string was specified. ?>
//var status = $('.status');
// Listen for messages from the player
if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
} else {
window.attachEvent('onmessage', onMessageReceived, false);
}
// Handle messages received from the player
function onMessageReceived(e) {
var data = JSON.parse(e.data);
switch (data.event) {
case 'ready':
onReady();
break;
case 'playProgress':
onPlayProgress(data.data);
break;
case 'pause':
onPause();
break;
case 'finish':
onFinish();
break;
}
}
// Call the API when a button is pressed
$('button').on('click', function() {
post($(this).text().toLowerCase());
});
// Helper function for sending a message to the player
function post(action, value) {
var data = { method: action };
if (value) {
data.value = value;
}
$('iframe')[0].contentWindow.postMessage(JSON.stringify(data), url);
}
function onReady() {
post('addEventListener', 'pause');
post('addEventListener', 'finish');
post('addEventListener', 'playProgress');
}
function onPause() {
console.log("vimeo paused");
}
function onFinish() {
playing = setInterval(function() {slide('left')}, 6000);
console.log("vimeo finish");
slide('left');
}
function onPlayProgress(data) {
clearInterval(playing);
console.log("vimeo play progress");
}
})();