I’m using a jQuery slider on my site which allows for the embedding of Vimeo videos and I was wondering how I can make it so that if someone clicks “play” on the vimeo video, the slider will stop auto-rotating until the video is finished or until the user clicks “pause.” I’m assuming I’m going to need to tap into the Vimeo API to accomplish this. Here is my slider code, any help is greatly appreciated!<\/p>\n
var slideInProgress = 0;\nvar currentSlideIndex = 0,\n slides;\nfunction setTopSlider() {\n if (jQuery('#top_slider #container .slide').length != 0) {\n slides = jQuery('#top_slider #container > .slide');\n for (var i = 0; i currentSlideIndex)\n dir = 'left';\n else\n dir = 'right';\n };\n if (dir == 'left') {\n if (!next) {\n next = currentSlideIndex + 1;\n if (next >= slides.length) {\n next = 0;\n }\n }\n nextSlide = jQuery(slides[next]);\n nextSlide.css('left', '100%');\n nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);\n \/\/nextSlide.animate({left: '0%'}, 1500);\n nextSlide.animate({\n left: '0%'\n }, {\n duration: slideSpeed,\n complete: function() {\n slideInProgress--;\n }\n });\n \/\/current.animate({left: '-100%'}, 1500);\n current.animate({\n left: '-100%'\n }, {\n duration: slideSpeed,\n complete: function() {\n slideInProgress--;\n }\n });\n\n } else {\n console.log('moving right');\n if (!next) {\n next = currentSlideIndex - 1;\n if (next < 0) {\n next = slides.length - 1;\n }\n }\n nextSlide = jQuery(slides[next]);\n nextSlide.css('left', '-100%');\n nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);\n \/\/nextSlide.animate({left: '0%'}, 1500);\n nextSlide.animate({\n left: '0%'\n }, {\n duration: slideSpeed,\n complete: function() {\n slideInProgress--;\n }\n });\n \/\/current.animate({left: '100%'}, 1500);\n current.animate({\n left: '100%'\n }, {\n duration: slideSpeed,\n complete: function() {\n slideInProgress--;\n }\n });\n\n }\n current.addClass('active');\n nextSlide.removeClass('active');\n var el = jQuery('.dot:eq(' + currentSlideIndex + ')');\n src = el.css(\"background-image\").replace(\"_over\", \"_off\");\n el.css(\"background-image\", src);\n el.removeClass('active');\n el = jQuery('.dot:eq(' + next + ')');\n src = el.css(\"background-image\").replace(\"_off\", \"_over\");\n el.css(\"background-image\", src);\n el.addClass('active');\n console.log('currentSlideIndex' + currentSlideIndex);\n console.log('next' + next);\n console.log('dir' + dir);\n currentSlideIndex = next;\n \/\/ **** \/\/\n slideInProgress--;\n \/\/ **** \/\/\n}\nsetTopSlider();\nsetInterval(function() {slide('left')}, 6000);\n<\/code><\/pre>\nI did find some code that makes it so that the slider automatically goes to the next slide after the video is done playing, maybe I can tie into this somehow:<\/p>\n
var f = $('iframe');\nvar url = f.attribute('src').split('?')[0]; \/\/HACK! had to hard code the protocol in here or postMethod shows error: Uncaught SyntaxError: An invalid or illegal string was specified.\n\/\/var status = $('.status');\n\n\n\/\/ Listen for messages from the player\nif (window.addEventListener){\n window.addEventListener('message', onMessageReceived, false);\n} else {\n window.attachEvent('onmessage', onMessageReceived, false);\n}\n\n\/\/ Handle messages received from the player\nfunction onMessageReceived(e) {\n var data = JSON.parse(e.data);\n\n\n switch (data.event) {\n case 'ready':\n onReady();\n break;\n\n case 'playProgress':\n onPlayProgress(data.data);\n break;\n\n case 'pause':\n onPause();\n break;\n\n case 'finish':\n onFinish();\n break;\n }\n}\n\n\/\/ Call the API when a button is pressed\n$('button').on('click', function() {\n post($(this).text().toLowerCase());\n});\n\n\/\/ Helper function for sending a message to the player\nfunction post(action, value) {\n var data = { method: action };\n\n if (value) {\n data.value = value;\n }\n $('iframe')[0].contentWindow.postMessage(JSON.stringify(data), url);\n}\n\nfunction onReady() {\n\n\n post('addEventListener', 'pause');\n post('addEventListener', 'finish');\n post('addEventListener', 'playProgress');\n}\n\nfunction onPause() {\n console.log(\"vimeo paused\");\n}\n\nfunction onFinish() {\n console.log(\"vimeo finish\");\n slide('left');\n}\n\nfunction onPlayProgress(data) {\n console.log(\"vimeo play progress\");\n}\n})();\n<\/code><\/pre>\n\n- \n
How about creating a boolean variable playing<\/code> and using it to keep track of when the video is playing or not. If the video is playing then don’t run your slide function.<\/p>\ne.g.<\/p>\n
var playing = false;\n\nfunction slide(dir) {\n if(playing)\n return false;\n ...\n}\n\nfunction onPause() {\n playing = false;\n console.log(\"vimeo paused\");\n}\n\nfunction onFinish() {\n playing = false;\n console.log(\"vimeo finish\");\n slide('left');\n}\n\nfunction onPlayProgress(data) {\n playing = true;\n console.log(\"vimeo play progress\");\n}\n<\/code><\/pre>\n<\/li>\n<\/ol>\nOriginally posted 2013-11-15 09:09:44. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
I’m using a jQuery slider on my site which allows for the embedding of Vimeo videos and I was wondering how I can make it so that if someone clicks “play” on the vimeo video, the slider will stop auto-rotating until the video is finished or until the user clicks “pause.” I’m assuming I’m going […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1406","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1406"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1406\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}