javascript - YouTube 视频的播放/暂停按钮

Question

我想要一个播放/暂停切换按钮来控制我的 YouTube 视频。

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

现在它只是一个链接。这是 onPlayerReady 函数的 javascript 代码

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();
    }
  });

出于某种原因，当我单击链接时，它总是执行 else 命令。我怎样才能让它识别出视频当前正在播放？有没有更好的方法来执行此播放/暂停切换操作？

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;
    }


  }

完整代码

 <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

onPlayerReady 参数 event 不可访问，因为您传递给 addEventListener 的函数也在使用该变量名称

因此使用另一个变量名称，例如:

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

实际上还有一个更大的错误。您想使用 onPlayerStateChange 的事件来告诉您状态。这是一个工作片段:

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;
  }
}