如何通过滚动出视口来检测Vimeo播放器是否被用户暂停



我在网站上有一个视频,当它滚动到视口时会自动播放,当它离开视口时会暂停。视频已静音,因此也可以在手机上播放。

我使用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>

11/15/18编辑添加:

内部

(isAnyPartOfElementInViewport(dv)) {,

目前只有

vimeoPlay(),

这意味着在视口中,无论用户是否手动点击Vimeo播放器上的暂停,只要他们开始滚动,视频就会再次播放。

你建议在vimeoPlay((周围放置一个内部条件语句,这样它只在用户没有手动暂停播放器的情况下播放?

我不能只是使用API的getPaused((来检查视频是否暂停,因为我认为这无法区分是由于视频在视口外而自动暂停还是通过单击暂停按钮手动暂停。

我想如果有一种方法可以问"这个视频在视口中暂停了吗",然后只在这种情况不成立的情况下播放视频,这可能会有所帮助,但我不知道该怎么写。

这是解决方案,

当用户暂停视频时,根据Vimeo github文档

当用户暂停视频时!。

解决方案:将其添加到您的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

希望这能有所帮助!

最新更新