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

Question

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

为了解决这个问题，我使用一个空的 div 覆盖 youtube iframe。这解决了滚动行为，但我也缺乏直接控制 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();
        });
    } 
}

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

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

我还尝试了以下方法:

$(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 未定义。”

Answer 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