当用户滚动离开时如何暂停 youtube 嵌入 [英] how can I pause a youtube embed when a user scrolls away

问题描述

我一直在寻求帮助，让视频在用户滚动离开时暂停.我已经能够找到有关 html5 视频的帮助，但现在我还需要知道如何使用 youtube API 来做同样的事情.

I have been trying to look for help with respect getting a video to pause when a user scrolls away. I have already been able to find help for html5 videos but now I also need to know how the youtube API can be used for the same.

嵌入YouTube的html结构如下

the html structure I have that embeds the YouTube is as follows

     <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 是否有非常不同的方法来做同样的事情?

I used the following for html5 - does the youtube API have a very different method to do the same?

    <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如果另一个玩家正在玩，我能够找到一个停止一个玩家的代码，但我不知道如何操纵它来实现我需要的东西.

I am not sure I understand how to entirely use the Youtube API I was able to find a code that stops one player if the other is playing but I dont see how that can be manipulated to achieve what I need.

<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.

You done a great job with HTML5 player and the function checkScroll().
It seem you have trouble to use it with the YouTube JS Player, well if you take the time to read the doc, you discover that the YouTube player is just an iframe.

试试我制作的这个活生生的例子:http://jsbin.com/cocatuta/15/edit?js,输出

Try this live example i made : http://jsbin.com/cocatuta/15/edit?js,output

所以基本上我只是替换:

So basically i just replace :

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

通过这个:

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

并添加两个函数playVideo和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();

希望对您有所帮助！是的，阅读文档甚至应该帮助你"(最终)

Hope it's help ! And yes, read the doc "is even supposed to help you" (eventually)

这篇关于当用户滚动离开时如何暂停 youtube 嵌入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！