javascript - JQuery Slider Help - Mouse-Over event solution -

so, seeking simple in context, challenging implement.

i want hover function disabled until user clicks play button , pause button.

so, mouse-over function of slider void until user clicks un-mute button (play youtube button) , clicks mute button (pause yt button). if go jsfiddle see that, upon load, if mouse hovers on slider , hovers out ... slider moves (after 6 sec). not want slider start until user starts youtube video.

var w = $('#image_rotator').width(), n = $('#slider .slide').length, c = 0, s = 0, intv;  if (n <= 1) $('#left, #right').hide(); $('#slider').width(w * n);  $('#left, #right').click(function () { c = (this.id == 'right' ? ++c : --c) < 0 ? n - 1 : c % n; $('#slider').stop().animate({     left: -c * w }, 300, function () {     if (c == 0) {         $('#playiunmute').show();     }     if (c == 1) {         $('#left').show();     }     if (c == 1) {         $('#right').show();     }     if (c == 1) {         $('#playiunmute').hide();     }     if (c == 10) {         $('#slider').css("left", "0");         $('#right').click();     } }); });   function setresetinterval(e) {  var intv = $("#slider"); if (e) {     timer = setinterval(function () {         $('#right').click();     }, 6000);  } else {     clearinterval(timer);  }  }    $("#imute").click(function (e) {   e.preventdefault();   setresetinterval(true);   s = 0;  });  $("#iunmute").click(function (e) {   e.preventdefault();   setresetinterval(false);   s = 1; }); $("#playiunmute").click(function (e) { e.preventdefault(); setresetinterval(false); s = 1; }); $('#slider, #left, #right, #playiunmute').hover(function (e) {     return (e.type == 'mouseleave' && s != 1) ? setresetinterval(true) :    setresetinterval(false); });    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', {     height: '460',     width: '1190',     controls: 1,     videoid: 'kduermuuogo',     playervars: {         controls: 0,         showinfo: 0,         modestbranding: 1,         wmode: "opaque",         rel: 0     },     events: {         'onready': onplayerready     }  });  }  function onplayerready(event) { player.mute(); event.target.playvideo(); event.target.setplaybackquality("hd720"); }    document.getelementbyid('iunmute').onclick = function (e) { e.preventdefault(); (player.ismuted()) ? player.unmute() : player.mute(); player.playvideo(); player.seekto(0); };  document.getelementbyid('imute').onclick = function (e) { player.mute(); player.pausevideo(); };  document.getelementbyid('playiunmute').onclick = function (e) { e.preventdefault(); (player.ismuted()) ? player.unmute() : player.mute(); player.playvideo(); };  $('#iunmute').click(function () { $('#imute').show(); }); $('#iunmute').click(function () { $('#iunmute').hide(); }); $('#imute').click(function () { $('#playiunmute').show(); }); $('#imute').click(function () { $('#imute').hide(); }); $('#playiunmute').click(function () { $('#imute').show(); }); $('#playiunmute').click(function () { $('#playiunmute').hide(); }); $('#iunmute').click(function () { $('#left').hide(); }); $('#iunmute').click(function () { $('#right').hide(); }); $('#playiunmute').click(function () { $('#left').hide(); }); $('#playiunmute').click(function () { $('#right').hide(); }); 

i had feeling initial question (trigger alert when slider moves left amount) going bug me until figured out how make work, , right! sat down , figured out sort of compromise-ish solution. in order work, had eliminate pause button added in favor of normal youtube player controls instead, because attach listeners them, resulted in shorter , more-comprehensible code. tested pretty thoroughly, , should accomplish precisely looking for: when video paused (or muted; wasn't sure if wanted functionality since, although compared mute button youtube's play/pause buttons in question, was still mute button.), video stop , slider advance next slide. when interval (or user manually advancing slides) causes slider return video, video start again beginning, , interval cancelled, way player advance past video user mute video. if don't want video start again beginning, can remove line player.seekto(0); in $("#left, #right").click() handler. if don't want mute button cause slide change, remove following interval function:

window.setinterval(function(){ if(player.ismuted()) {     player.pausevideo(); }}, 100); 

as both player.unmute(); lines in $("#left, #right").click() handler.

below portion of code modified/added. added portion in order prevent answer becoming longer had (it's on longer side far answers go). full code visible in fiddle.

function onplayerready() {     player.playvideo();     player.unmute();     player.setplaybackquality("hd720");     window.setinterval(function(){     if(player.ismuted()) {         player.pausevideo();     }}, 100); }  function onplayerstatechange() {     if (player.getplayerstate() == 2) {         $("#right").click();     } } 

i hope you're looking for!

http://jsfiddle.net/ironflare/6o6kl8pf/2/

if have questions, feel free add comment answer.