Question

我在网站上有一个视频，当它滚动到视口时会自动播放，而当离开视口时会暂停播放。视频已被静音，因此它也可以在移动设备上使用。

我正在使用Vimeo API播放和暂停视频，并使用一些JS在加载和滚动时检测视频是否在视口内。

这一切都很好，除了用户可以选择通过通常的Vimeo播放栏手动暂停视频以及调高音量（视频的音乐配乐对于观看它不是必不可少的，但是某些用户可能想听）。

问题是，如果用户手动暂停视频，然后开始滚动，脚本将检测到视频在视口中并再次开始播放，至少直到视频离开视口为止。

这是不希望的，如果用户调高音量然后暂停视频，这是特别不希望的，因为现在突然之间，当他们开始向下滚动时，他们会听到视频播放。

是否有一种方法可以检测用户是否已与Vimeo播放器进行交互（以使其暂停），以及何时从滚动到视口中自动将其暂停？浏览Vimeo API文档（https://github.com/vimeo/player.js）时没有看到它。

如果可能的话，我只添加一条条件语句，说如果用户当前暂停了在视口中滚动视频，则不播放视频。

也许还有其他解决方法？唯一的其他要求是解决方案是纯/原始JS。

当前代码：

<div id="video-box">
  <iframe id="i_video" src="https://player.vimeo.com/video/123456789?loop=1&amp;muted=1&amp;title=0&amp;byline=0&amp;portrait=0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="530" height="298" frameborder="0"></iframe>
</div>

<script src="https://player.vimeo.com/api/player.js"></script>

<script>
  var iframe = document.querySelector('iframe');
  var player = new Vimeo.Player(iframe);

  function vimeoPlay(){
    player.play()
  };

  function vimeoPause(){
    player.pause()
  };

  var dv = document.getElementById('video-box');
  var v = document.getElementById('i_video');

  function isAnyPartOfElementInViewport(dv) {
    const rect = dv.getBoundingClientRect();
    const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
    const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
    const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);

    return (vertInView && horInView);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    if (isAnyPartOfElementInViewport(dv)) {
      vimeoPlay();
    }
    else {
      vimeoPause();
    }
  }, false);

  window.addEventListener('scroll', function (event) {

  if (isAnyPartOfElementInViewport(dv)) {
    vimeoPlay();
  }
  else {
    vimeoPause();
  }
  }, false);
  </script>

18年11月15日修改为添加：

在内部

(isAnyPartOfElementInViewport(dv)) {,

目前只有

vimeoPlay(),

表示在视口中时，无论用户是否手动单击Vimeo播放器上的“暂停”，只要他们开始滚动视频，视频就会再次播放。

对于在vimeoPlay（）周围放置一个内部条件语句，以便仅在用户未手动暂停播放器的情况下播放，您会提出什么建议？

我不能仅使用API的getPaused（）来检查视频是否已暂停，因为我不认为这可以区分是由于视频不在视口中而被自动暂停还是通过单击暂停按钮来手动进行区分。

我猜是否有一种方法可以问“视频是否在视口中暂停了”，然后仅在条件不成立时才播放视频，这可能会有所帮助，但我不确定如何写。 / p>

Answer 1

这是解决方案，

根据Vimeo github docs

，当用户暂停视频时

用户暂停视频！

解决方案：将此添加到您的JS文件

player.on('pause', function() {
    console.log('paused the User!');
});

通过滚动暂停视频时

解决方案：

window.addEventListener('scroll', function(event) {

    if (isAnyPartOfElementInViewport(dv)) {
        vimeoPlay();
    } else {
        console.log('paused by scrolling');
        vimeoPause();
    }
}, false);

更新：附加了更新的提琴手

这是工作中的jsFiddle

希望这会有所帮助！

如何检测Vimeo播放器是被用户暂停还是通过滚动到视口之外

1 个答案: