当用户滚动离开时如何暂停 YouTube 嵌入

我一直在尝试寻求帮助，以便在用户滚动离开时让视频暂停。我已经能够找到 html5 视频的帮助，但现在我还需要知道如何使用 youtube API 来实现同样的目的。

我嵌入 YouTube 的 html 结构如下

     <div class="ytube-container">

     <iframe id="vplayer" 
      src="//www.youtube.com/embed/qKaMgJwBItM?modestbranding=1&showinfo=0&modestbranding=0&controls=1&rel=0&autoplay=1&vq=hd720" 
    frameborder="0"webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

    </div>

我对 html5 使用了以下内容 - youtube API 是否有非常不同的方法来执行相同的操作？

    <script>
    //play when video is visible
    var videos = document.getElementsByTagName("video"), fraction = 0.8;

    function checkScroll() {

    for(var i = 0; i < videos.length; i++) {
    var video = videos[i];
    var x = 0,
    y = 0,
    w = video.offsetWidth,
    h = video.offsetHeight,
    r, //right
    b, //bottom
    visibleX, visibleY, visible,
    parent;

    parent = video;
    while (parent && parent !== document.body) {
    x += parent.offsetLeft;
    y += parent.offsetTop;
    parent = parent.offsetParent;
    }

    r = x + w;
    b = y + h;

    visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
    visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

    visible = visibleX * visibleY / (w * h);

    if (visible > fraction) {
    video.play();
    } else {
    video.pause();
    }
    }

    }

    window.addEventListener('scroll', checkScroll, false);
    window.addEventListener('resize', checkScroll, false);

    //check at least once so you don't have to wait for scrolling for the video to start
    window.addEventListener('load', checkScroll, false);
    checkScroll();

    </script>  

我不确定我是否理解如何完全使用 Youtube API 我找到了一个代码，可以在一个玩家正在玩时停止另一个玩家，但我不知道如何操纵它来实现我所需要的。

<script>

players = new Array();

function onYouTubeIframeAPIReady() {
var temp = $("iframe.vplayer");
for (var i = 0; i < temp.length; i++) {
    var t = new YT.Player($(temp[i]).attr('id'), {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
    players.push(t);
}

}
onYouTubeIframeAPIReady();


function onPlayerStateChange(event) {

if (event.data == YT.PlayerState.PLAYING) {
    var temp = event.target.a.src;
    var tempPlayers = $("iframe.yt_players");
    for (var i = 0; i < players.length; i++) {
        if (players[i].a.src != temp) players[i].stopVideo();

    }
}
}

你在 HTML5 播放器和功能方面做得很好checkScroll().
看来您在使用 YouTube JS 播放器时遇到了麻烦，如果您花时间阅读文档，您会发现 YouTube 播放器只是一个 iframe。

试试我做的这个例子：http://jsbin.com/cocatuta/15/edit?js,输出

所以基本上我只是替换：

var videos = document.getElementsByTagName("video"), fraction = 0.8;

这样 ：

var videos = document.getElementsByTagName("iframe"), fraction = 0.8;

并添加两个功能playVideo and pauseVideo.

function playVideo() {
  player.playVideo();
}

function pauseVideo() {
  player.pauseVideo();
}

完整代码：

//play when video is visible
var videos = document.getElementsByTagName("iframe"), fraction = 0.8;

function checkScroll() {


  for(var i = 0; i < videos.length; i++) {
    var video = videos[i];

    var x = 0,
        y = 0,
        w = video.width,
        h = video.height,
        r, //right
        b, //bottom 
        visibleX, visibleY, visible,
        parent;


    parent = video;
    while (parent && parent !== document.body) {
      x += parent.offsetLeft;
      y += parent.offsetTop;
      parent = parent.offsetParent;
    }

    r = x + parseInt(w);
    b = y + parseInt(h);


    visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
    visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));


    visible = visibleX * visibleY / (w * h);


    if (visible > fraction) {
      playVideo();
    } else {
      pauseVideo()

    }
  }

};

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

//check at least once so you don't have to wait for scrolling for the video to start
window.addEventListener('load', checkScroll, false);
checkScroll();

希望有帮助！是的，阅读文档“甚至应该对你有帮助”（最终）