播放/暂停按钮的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参数事件是不可访问的，因为你传递给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;
  }
}

Answer 2

对于当前youtube的HTML5播放器，您可以使用:

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

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

我创建了一个chrome扩展。