Play/Pause button for a youtube video

Question

I want to have a play / pause toggle button that controls my youtube video.

<a id="play-button">Play / Pause</a>

Right now it is just a link. This is the javascript code for the onPlayerReady function

function onPlayerReady(event) {

var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function(event) {
    if (event.data==YT.PlayerState.PLAYING) {
        player.pauseVideo();    
    }else {
        player.playVideo();
    }
  });

For some reason when I click the link it always does the else command. How can I get it to recognize that the video is currently playing? Is there a better way to do this play / pause toggle action?

SOLUTION for onPlayerStateChange

  function onPlayerStateChange(event) {

if (event.data == YT.PlayerState.BUFFERING) {
    event.target.setPlaybackQuality('hd1080');
}

if (event.data == YT.PlayerState.PAUSED) {
    $("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");
    this.is_playing = false;
}

if (event.data == YT.PlayerState.PLAYING) {
    $("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");
    this.is_playing = true;
    }


  }

FULL CODE

 <div id="centerplayer">
<div id="player"></div>
<script>
  var is_playing = false;
  var fullscreen = false;
  var live = true;

  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 onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '600',
      width: '1067',
    playerVars:{
            autoplay: 1,
            controls: 0,
            rel: 0,
            iv_load_policy: 3,
            showinfo: 0
        },

     loadPlaylist:{
        listType:'playlist'
     },

      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
        'onError': onErrorDetect
      }
    });
  }

  function onErrorDetect(event){
    if (event.data == 100) {
    //video request was not found, error occurs when video has been removed or has been marked as private
    event.target.nextVideo();   
    } else{
    location.reload();
    }

}

  function onPlayerReady(event) {
    event.target.setPlaybackQuality('default');
    event.target.loadPlaylist(gon.playlist,gon.s_index,gon.s_time);
    event.target.setLoop(true);

    //PLAYER CONTROLS
      var playButton = document.getElementById("play-button");
      var that = this;
      playButton.addEventListener("click", function(click_event) {
        if (that.is_playing) {
            $("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");

        //  if(live){
        //  var liveimg = document.getElementById('live-icon');
        //  liveimg.parentNode.removeChild(liveimg);
        //  live = false;
        //  }

            player.pauseVideo();    
        }else {
            $("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");
            player.playVideo();
        }
      });

      var muteButton = document.getElementById("mute-button");
      muteButton.addEventListener("click", function() {
        if(player.isMuted()){
            $("#mute-button").attr("src", "http://www.beached.tv/assets/sound-2850c52028b16dd2c2e264c5dddb39ba.svg");
            player.unMute();
        }else{
            $("#mute-button").attr("src", "http://www.beached.tv/assets/mute-8d50674fdbcdd2cc9597f009be41cea9.svg");
            player.mute();
        }
      });

      var enlargeButton = document.getElementById("enlarge-button");
      enlargeButton.addEventListener("click", function() {
        if (fullscreen){
            $("#enlarge-button").attr("src", "http://www.beached.tv/assets/resize-enlarge-a44a4204dca596b45aacb25610ee3189.svg");
            player.setSize(1067,600);
            fullscreen = false;         
        }else{
            $("#enlarge-button").attr("src", "http://www.beached.tv/assets/resize-shrink-f63cf0e6ab1eb2bb8f7223798c4fc9c5.svg");
            player.setSize(1410,793);
            fullscreen = true;
        }
      });

    }

  function onPlayerStateChange(event) {

    if (event.data == YT.PlayerState.BUFFERING) {
        event.target.setPlaybackQuality('hd1080');
    }

    if (event.data == YT.PlayerState.PAUSED) {
        $("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");
        this.is_playing = false;

        if(live){
        var liveimg = document.getElementById('live-icon');
        liveimg.parentNode.removeChild(liveimg);
        live = false;
        }
    }

    if (event.data == YT.PlayerState.PLAYING) {
        $("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");
        this.is_playing = true;

        var current_time = Math.round(new Date().getTime() / 1000);
        if (current_time > gon.end_of_stream){
        //  location.reload();
        }
    }


  }

</script>

Answer 1

For the current HTML5 player of youtube you can do this easily using:

document.getElementByTagName('video')[0].play()

document.getElementByTagName('video')[0].play()

I created a chrome extension here.

Answer 2

onPlayerReady parameter event isn't accessible, because the function you are passing to your addEventListener is also using that variable name

So use another variable name, ex:

playButton.addEventListener("click", function(click_event) {

There's actually a bigger error. You want to use onPlayerStateChange's event to tell the you the state. Here's a working snippet:

var is_playing = false;

function onPlayerReady(event) {
  var playButton = document.getElementById("play-button");
  var that = this;
  playButton.addEventListener("click", function(click_event) {
    if (that.is_playing) {
        player.pauseVideo();    
    }else {
        player.playVideo();
    }
  });
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    this.is_playing = true;
  }
}