YouTube API - 再生/一時停止切り替えボタン

Question

透明なPNG "フレーム"が埋め込まれた埋め込みYouTube動画があるため、PNGの前には目に見えない再生/一時停止ボタンが必要です。すべて正常に動作しており、動画はonClickで再生されますが、動画が再生されると一時停止できません。私は以下の「セクション4」のいくつかのバリエーションを試しましたが、何も動作していないようです。誰かが私に行方不明を教えてもらえますか？

var video_id = $('#video-player').attr('data-id'); 
    // 1. This code loads the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 

    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // 2. This function creates an <iframe> (and YouTube player) after the API code downloads. 
    var player; 
    function onYouTubeIframeAPIReady() { 
     player = new YT.Player('video', { 
      width: '470', 
      height: '263', 
      videoId: 'ubvR6_pwpIk', 
      playerVars: { 
       modestbranding: 1, 
       controls: 0, 
       showinfo: 0, 
       wmode: 'opaque', 
       branding: 0, 
       autohide: 0, 
       rel: 0 
      }, 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

    // 3. The API calls this function when the video player is ready. 
    function onPlayerReady(event) { 
     $('#video-button').click(function(event){ 
      player.playVideo(); 
     }); 
    } 

    // 4. The API calls this function when the player's state changes. 
    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING) { 
      $('#video-button').click(function(event){ 
       player.pauseVideo(); 
      }); 
     } 
     else { 
      $('#video-button').click(function(event){ 
       player.playVideo(); 
      }); 
     } 
    } 

Answer 1

私はここにあなたの状態についてはよく分からない：

if (event.data == YT.PlayerState.PLAYING) { 

代わりにこれを試してみてください：

• -1：ここ

  var state = player.getPlayerState(); 
  if(state==1){ 
  

  は、状態リストであります：開始していません
•   0：
•   1を終了：
•   2をプレイ：
•   3を一時停止：
•   5をバッファリング：ビデオは

Reference

EDIT
をきっかけ同じ結果から...

onPlayerStateChange ...
の中の何かを実際に試してみてください。
console.logに上記で提案したstate変数をお勧めします。
console.logにeventもあることを確認してください。

これらのデバッグテストは何も明らかにしていない場合、私は驚くだろう...私はちょうどドキュメントでこれを見つけた

---：

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

function onytplayerStateChange(newState) { 
    alert("Player's new state: " + newState); 
}