Javascript youtube视频的播放/暂停按钮_Javascript_Onclick_Youtube Api_Youtube Javascript Api

Javascript youtube视频的播放/暂停按钮

javascript youtube-api

Javascript youtube视频的播放/暂停按钮,javascript,onclick,youtube-api,youtube-javascript-api,Javascript,Onclick,Youtube Api,Youtube Javascript Api,我想要一个播放/暂停切换按钮来控制我的youtube视频 <a id="play-button">Play / Pause</a> 由于某些原因，当我单击链接时，它总是执行else命令。如何让它识别当前正在播放的视频？是否有更好的方法执行此播放/暂停切换操作 onPlayerStateChange的解决方案 function onPlayerStateChange(event) { if (event.data == YT.PlayerState.BUFFERIN

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

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

由于某些原因，当我单击链接时，它总是执行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>


var是_playing=false；
var全屏=假；
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（标记，firstScriptTag）；
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
高度：'600'，
宽度：'1067'，
playerVars：{
自动播放：1，
控件：0，
rel:0，
iv_负载_策略：3，
showinfo:0
},
加载播放列表：{
listType:“播放列表”
},
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange，
“OneRor”：OneRorDetect
}
});
}
函数onErrorDetect（事件）{
如果（event.data==100）{
//找不到视频请求，当视频已被删除或标记为私有时发生错误
event.target.nextVideo（）；
}否则{
location.reload（）；
}
}
函数onPlayerReady（事件）{
event.target.setPlaybackQuality（“默认”）；
事件.target.loadPlaylist（gon.playlist，gon.s_索引，gon.s_时间）；
event.target.setLoop（true）；
//玩家控制
var playButton=document.getElementById（“播放按钮”）；
var=这个；
playButton.addEventListener（“单击”），函数（单击事件）{
如果（那就是你在玩）{
$（“#播放按钮”）.attr（“src”http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");
//如果（现场）{
//var liveimg=document.getElementById（'live-icon'）；
//liveimg.parentNode.removeChild（liveimg）；
//活=假；
//  }
player.pauseVideo（）；
}否则{
$（“#播放按钮”）.attr（“src”http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");
player.playVideo（）；
}
});
var muteButton=document.getElementById（“静音按钮”）；
muteButton.addEventListener（“单击”，函数（）{
if（player.ismute（））{
$（“#静音按钮”）.attr（“src”http://www.beached.tv/assets/sound-2850c52028b16dd2c2e264c5dddb39ba.svg");
player.unMute（）；
}否则{
$（“#静音按钮”）.attr（“src”http://www.beached.tv/assets/mute-8d50674fdbcdd2cc9597f009be41cea9.svg");
player.mute（）；
}
});
var放大按钮=document.getElementById（“放大按钮”）；
enlargeButton.addEventListener（“单击”，函数（）{
如果（全屏）{
$（“#放大按钮”）.attr（“src”http://www.beached.tv/assets/resize-enlarge-a44a4204dca596b45aacb25610ee3189.svg");
播放器设置大小（1067600）；
全屏=假；
}否则{
$（“#放大按钮”）.attr（“src”http://www.beached.tv/assets/resize-shrink-f63cf0e6ab1eb2bb8f7223798c4fc9c5.svg");
播放器设置大小（1410793）；
全屏=真；
}
});
}
函数onPlayerStateChange（事件）{
if（event.data==YT.PlayerState.BUFFERING）{
事件.target.setPlaybackQuality（'hd1080'）；
}
如果（event.data==YT.PlayerState.PAUSED）{
$（“#播放按钮”）.attr（“src”http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");
this.is_playing=false；
如果（现场）{
var liveimg=document.getElementById（'live-icon'）；
liveimg.parentNode.removeChild（liveimg）；
活=假；
}
}
if（event.data==YT.PlayerState.PLAYING）{
$（“#播放按钮”）.attr（“src”http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");
this.is_playing=true；
var current_time=Math.round（new Date（）.getTime（）/1000）；
if（当前\u时间>\u流的gon.end\u）{
//location.reload（）；
}
}
}

onPlayerReady参数事件不可访问，因为传递给addEventListener的函数也使用该变量名

因此，请使用另一个变量名，例如：

playButton.addEventListener（“单击”），函数（单击事件）{

实际上有一个更大的错误。您想使用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;
  }
}

对于youtube当前的HTML5播放器，您可以使用以下工具轻松完成此操作：

document.getElementByTagName（'video'）[0].play（）

document.getElementByTagName（'video'）[0].play（）

我创建了一个chrome扩展。

即使不传递事件，只保留函数参数，它也不起作用blank@user3646037我重新阅读了代码。实际上问题远不止此，这意味着您必须重新编码。--onPlayerReady只被调用一次。您实际上希望在onPlayerStateChange中使用事件，因为只要状态发生更改，就会调用函数提示：您可能可以保留大部分代码，但用于检查视频是否正在播放的变量必须来自onPlayerStateChange。稍后我将发布一个解决方案：）谢谢，伙计，我删除了&！done，并在onPlayerStateChange中添加了另一个if语句，该语句在YT.PlayerState.PAUSED时将this.is_设置为false，并且它起作用了

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