Вызов функции на странице нажмите

Question

На странице есть 2 кнопки, т. Е. play и stop. video воспроизводится при загрузке и показывает кнопку stop. Нажатие на кнопку stop остановит видео и покажет кнопку play.

var videoMode = false, 
    videoModeSelector = '#intro .mouse, #intro .content, .slider.fullscreen .overlay'; 
$(window).load(function() { 
    $(videoModeSelector).animate({ 
     opacity: 0 
    }, { 
     duration: 500, 
     queue: false, 
     complete: function() { 
      if (!videoMode) { 
       $('.slider').unmuteYTPVolume(); 
       $('<div />').appendTo('#intro').css({ 
        position: 'absolute', 
        textAlign: 'center', 
        bottom: '30px', 
        color: '#FFF', 
        left: 0, 
        right: 0, 
        opacity: 0 
       }).addClass('click-to-exit'); 
       $('<i />').appendTo('.click-to-exit').addClass('fa fa-volume-off'); 
       setTimeout(function() { 
        $('.click-to-exit').animate({ 
         opacity: 1 
        }, { 
         duration: 500, 
         queue: false, 
         complete: function() {} 
        }); 
       }, 500); 
      } 
      videoMode = true; 
      $(this).hide(); 
     } 
    }); 
}); 
$that.click(function (evt) { 
    if (videoMode && $(evt.target).is('.fa-volume-off')) { 
     $('.slider').muteYTPVolume(); 
     $(videoModeSelector).show().animate({ 
      opacity: 1 
     }, { 
      duration: 500, 
      queue: false 
     }); 
     $that.find('.click-to-exit').hide(); 
     videoMode = false; 
    } else { 
     $('.slider').unmuteYTPVolume(); 
     $(videoModeSelector).show().animate({ 
      opacity: 0 
     }, { 
      duration: 500, 
      queue: false 
     }); 
     $that.find('.click-to-exit').show(); 
     videoMode = true; 
    } 
}); 

Это нормально работает. Теперь я хочу добавить функцию щелчка на странице. При нажатии на страницу видео останавливается и показывает кнопку play, но кнопка play не работает. Любые идеи о том, как исправить это?

$(document).click(function() { 
    if (videoMode) { 
     $('.slider').muteYTPVolume(); 
     $('.click-to-exit').hide().animate({ 
      opacity: 0 
     }, { 
      duration: 500, 
      queue: false 
     }); 
     $(videoModeSelector).show().animate({ 
      opacity: 1 
     }, { 
      duration: 500, 
      queue: false 
     }); 
     videoMode = false; 
    } 
}); 

Answer 1

Ваша кнопка воспроизведения является частью «документа». Таким образом, приведенный ниже код переопределяет обработчик событий всех других элементов.

$(document).click(function( if (videoMode) { 
      $('.slider').muteYTPVolume(); 
      $('.click-to-exit').hide().animate({ opacity: 0 }, { duration: 500, queue: false }); 
      $(videoModeSelector).show().animate({ opacity: 1 }, { duration: 500, queue: false });    
      videoMode = false; 
     } 
    }); 

Вы можете прямо вперед обернуть эту обработку в состояние, как:

if (videoMode) { 
    $(document).click(function(){ 
      $('.slider').muteYTPVolume(); 
      $('.click-to-exit').hide().animate({ opacity: 0 }, { duration: 500, queue: false }); 
      $(videoModeSelector).show().animate({ opacity: 1 }, { duration: 500, queue: false });    
      videoMode = false; 

    }); 
} 

Answer 2

эта функция работает нормально , но вы снова нажать на кнопку воспроизведения, эта функция вызывает :(

   $(document).click(function(e) { 
       if(videoMode){ 
        $(videoModeSelector).show().animate({ opacity: 1 }, { duration: 500, queue: false }); 
        $that.find('.click-to-exit').show().animate({ opacity: 0 }, { duration: 500, queue: false, }); 
        $('.slider').muteYTPVolume(); 
       } 
      });