Question

我有一个模板，我建立了使用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();
        });
    } 
}

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

=============== UPDATE =================

我还尝试过以下方法：

$(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":""}','*');

    }

});

然而，我收到错误＆＃34;未捕获的ReferenceError：未定义YT。＆＃34;

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

Answer 2

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

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

使用外部按钮

2 个答案: