使用外部按钮切换播放/暂停 Youtube 视频答案

【问题标题】：Toggle Play/Pause Youtube Video with external button使用外部按钮切换播放/暂停 Youtube 视频
【发布时间】：2017-01-25 16:54:05
【问题描述】：

我有一个模板，我正在使用 fullPage js 创建滑动部分。该页面支持视频，但当用户将光标滚动到视频本身的顶部时，滚动和手势将被禁用。同样，在移动设备上也可以观察到这种行为。

为了解决这个问题，我使用了一个覆盖 youtube iframe 的空 div。这解决了滚动行为，但我也缺乏直接控制 youtube 播放器的能力。我尝试使用 youtube API 和 jquery 来伪造能够使用 youtube 播放器顶部的空 div 切换播放/暂停，但它不起作用。

http://codepen.io/lumpeter/pen/XpayeB

youtube的主要代码是：

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

function onPlayerReady(event) {
        $('#video-button').click(function(event){
            ytplayer.playVideo();
        });
    }

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        $('#video-button').click(function(event){
            ytplayer.pauseVideo();
        });
    }
    else {
        $('#video-button').click(function(event){
            ytplayer.playVideo();
        });
    } 
}

谁能说出为什么这不起作用？我有事件侦听器寻找更改并使用布尔值来检测视频的状态以切换播放/暂停，但由于某种原因，这不像我预期的那样工作。

===============更新=================

我还尝试了以下方法：

$(document).on('click', '#pauseVideo', function(){  
player = new YT.Player('myVideo')             
if (event.data == player.PlayerState.PAUSED) {
      $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}','*');
}

if (event.data == player.PlayerState.PLAYING) {
      $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');

    }

});

但是，我收到错误“Uncaught ReferenceError: YT is not defined”。

【问题讨论】：

标签： javascript jquery html youtube-api fullpage.js

【解决方案1】：

由于 fullpage.js 已经通过添加 ?enablejsapi=1 并为您加载 API 的 JS 脚本来完成部分工作，因此您只需要这样做：

var player;
window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('myVideo');
}

$(document).on('click', '#pauseVideo', function(){                       
      $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
});

Reproduction online

【讨论】：

这很好用！但是我正在尝试切换暂停或播放，因此这需要能够检测到视频的状态。
我尝试了以下方法：var is_playing = false;函数 onPlayerReady(event) { var pauseButton = document.getElementById("pauseVideo"); var that = this; pauseButton.addEventListener("click", function(click_event) { if (that.is_playing) { player.pauseVideo(); }else { player.playVideo(); } }); } 函数 onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { this.is_playing = true; } }
只在一个javascript变量中处理视频的状态。假设它将在部分加载后播放，并且每当您检测到点击时，更改状态。容易。
顺便说一句，您在更新代码的点击事件中缺少event 参数。

【解决方案2】：

感谢阿尔瓦罗！是的，我对 youtube api 的解决方案有点过度思考。我只需要使用带有二进制真/假语句的布尔值。超级简单，应该以前看过。再次感谢您的帮助！

var player;
window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('myVideo',{
          events: { 'onStateChange': onPlayerStateChange }
        });
}

var isPlaying = true;



$(document).on('click', '#pauseVideo', function(){    
    if ( isPlaying == true){
      $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
      isPlaying = false;
    } else {
      $('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}','*');
      isPlaying = true;
    }          
});

【讨论】：