使用 JavaScript 暂停所有 Vimeo 视频？答案

【问题标题】：Pausing all Vimeo videos with JavaScript?使用 JavaScript 暂停所有 Vimeo 视频？
【发布时间】：2013-12-12 01:15:08
【问题描述】：

当点击任何链接时，我正在尝试暂停所有 Vimeo 视频。我正在构建一个滚动条，并且不希望视频在滚动到下一个项目时继续播放。

我可以暂停其中一个视频 - 谁能看到我做错了什么？

var iframe = $('.vimeovideo')[0, 1],
    player = $f(iframe),
    status = $('.status');

$('a').bind('click', function () {
    player.api("pause");
});

http://jsfiddle.net/HfwWY/1975/

谢谢

【问题讨论】：

标签： javascript jquery api video vimeo

【解决方案1】：

我通过使用 jQuery 的 each() 来迭代和暂停每个视频的播放器取得了成功。

var iframes = $('.vimeovideo'),
    status  = $('.status');

$('a').bind('click', function() {
  iframes.each(function() {
    var player = $f(this);
    player.api("pause");
  });
  return false;
});

a {
  display: block;
  font-size: 1.2em;
  margin: 0 0 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//a.vimeocdn.com/js/froogaloop2.min.js"></script>
<a href="#">PAUSE</a>
<iframe class="vimeovideo" src="//player.vimeo.com/video/67021810?title=0&amp;byline=0&amp;portrait=0&amp;color=C0C000" width="400" height="225" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe class="vimeovideo" src="//player.vimeo.com/video/78298758?title=0&amp;byline=0&amp;portrait=0&amp;color=C0C000" width="400" height="225" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

View on JSFiddle

【讨论】：

【解决方案2】：

Here is a html and javascript code to manage Youtube and Vimeo videos to pause on scroll.

youtube 和 vimeo 的 iframe id 应该不同。它适用于同一页面上的多个视频。

<!DOCTYPE html>
<html>
<head>
<title>Pause Video on Scroll</title>
</head>

<body>
            <iframe id="vdoplyr_9999" width="480" height="315" src="http://www.youtube.com/embed/K4pVQq0_4wg?enablejsapi=1&start=0&autoplay=0"
  frameborder="0"></iframe>
  <iframe id="vmoplyr_9999" width="480" height="275" src="https://player.vimeo.com/video/209375339" frameborder="0"></iframe>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
<div>Lorem ipsum text force scroll videos in iframe.</div>
</body>

<script src="https://www.youtube.com/iframe_api"></script> //youtube API
<script src="https://player.vimeo.com/api/player.js"></script> //vimeo API
<script>
var videos = document.getElementsByTagName("iframe"), fraction = 0.8;

function checkScroll() {
  for(var i = 0; i < videos.length; i++) {
    var video = videos[i];
    var iframeid = document.getElementById(video.id);

    if (video.id.indexOf('vdoplyr_') > -1) //youtube URL id
        var playerytb = new YT.Player(video.id);
    else if (video.id.indexOf('vmoplyr_') > -1) //vimeo URL id
        var playervmo = new Vimeo.Player(iframeid);

    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) {
      if (video.id.indexOf('vdoplyr_') > -1) //if youtube video
          iframeid.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
      else if (video.id.indexOf('vmoplyr_') > -1) //if vimeo video
          playervmo.pause();
    }
  }
};
window.addEventListener('scroll', checkScroll, false);
checkScroll();
</script>
</html>

【讨论】：