且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-01 20:05:52

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

You done a great job with HTML5 player and the function checkScroll().
It seem you have trouble to use it with the *** JS Player, well if you take the time to read the doc, you discover that the *** 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;

并添加两个函数playVideopauseVideo.

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)