Toggle Play/Pause Youtube Видео с внешней кнопкой

Question

У меня есть шаблон, который я строю с помощью fullPage js для создания скользящих разделов. Страница поддерживает видео, но прокрутка и жесты отключены, когда пользователи прокручиваются с помощью курсора поверх самого видео. Аналогично, это поведение наблюдается на мобильных устройствах.

Чтобы обойти это, я использую пустой div, наложенный на iframe youtube. Это решает поведение прокрутки, но мне также не хватает возможности напрямую управлять проигрывателем YouTube. Я пробовал использовать API-интерфейс youtube и jquery, чтобы подделать возможность переключения play/pause с пустым div, который у меня есть поверх проигрывателя youtube, но он не работает.

http://codepen.io/lumpeter/pen/XpayeB

Первичный код для YouTube является:

function onYouTubePlayerReady(playerId) { 
    ytplayer = document.getElementById("player"); 
    ytplayer.addEventListener("onStateChange", "onPlayerStateChange"); 
} 

function onPlayerReady(event) { 
     $('#video-button').click(function(event){ 
      ytplayer.playVideo(); 
     }); 
    } 

function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING) { 
     $('#video-button').click(function(event){ 
      ytplayer.pauseVideo(); 
     }); 
    } 
    else { 
     $('#video-button').click(function(event){ 
      ytplayer.playVideo(); 
     }); 
    } 
} 

Кто-нибудь может сказать, почему это не работает? У меня есть слушатели событий, которые ищут изменения и используют логическое определение состояния видео для переключения воспроизведения/паузы, но по какой-то причине это не работает, как я ожидал.

=============== UPDATE =================

Я также попытался следующие:

$(document).on('click', '#pauseVideo', function(){ 
player = new YT.Player('myVideo')    
if (event.data == player.PlayerState.PAUSED) { 
     $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}','*'); 
} 

if (event.data == player.PlayerState.PLAYING) { 
     $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*'); 

    } 

}); 

Однако, я получаю сообщение об ошибке «Uncaught ReferenceError: YT не определен».

Answer 1

Как fullpage.js уже делает часть работы путем добавления ?enablejsapi=1 и загрузки сценария JS в API для вас, то вам нужно только сделать это:

var player; 
window.onYouTubeIframeAPIReady = function() { 
    player = new YT.Player('myVideo'); 
} 

$(document).on('click', '#pauseVideo', function(){      
     $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*'); 
}); 

Reproduction online

Answer 2

Благодаря Alvaro ! Да, я немного переоценил решение с youtube api. Мне просто нужно было использовать логическое выражение с бинарным оператором true/false. Супер легкий, должен был видеть это раньше. Еще раз спасибо за вашу помощь!

var player; 
window.onYouTubeIframeAPIReady = function() { 
    player = new YT.Player('myVideo',{ 
      events: { 'onStateChange': onPlayerStateChange } 
     }); 
} 

var isPlaying = true; 



$(document).on('click', '#pauseVideo', function(){  
    if (isPlaying == true){ 
     $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*'); 
     isPlaying = false; 
    } else { 
     $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}','*'); 
     isPlaying = true; 
    }   
});