Question

我正在尝试在页面上播放多个Brightcove视频，就像当视频退出浏览器视口时一样，我想停止播放哪个是在视口中退出的视频。到目前为止，如果页面上有多个视频，则在视口上可见时会播放，但问题是退出视口时不会停止播放。

请提示我在哪里弄错了。

$(currentVideo).each(function(){
    if(viewPort !== false) {
        videojs('#'+ currentVideo).ready(function() {
            var myPlayer = this;
            window.onscroll = checkIfVideoInView();
            function checkIfVideoInView() {
                if (isScrolledIntoView('#'+ currentVideo)) {
                    console.log('play started');
                    myPlayer.play();
                } else {
                    console.log('play stopped');
                    myPlayer.pause();
                }
            }

            checkIfVideoInView();

            function isScrolledIntoView(elem) {
                var docViewTop      = $(window).scrollTop();
                var docViewBottom   = docViewTop + $(window).height();
                var elemTop         = $(elem).offset().top;
                var elemBottom      = elemTop + $(elem).outerHeight();
                return (
                    elemBottom > docViewTop &&
                    elemTop < docViewBottom
                );
            }
        });
    } 
});

Answer 1

您的代码似乎基于Brigthcove自己的Scrolling Player View plugin。我看到的唯一区别是：

他们的插件代替var elemBottom = elemTop + $(elem).outerHeight();使用： var elemBottom = elemTop + $(elem).height();

作为回报，他们还检查底部是否小于或等于文档视图底部，顶部是否大于文档视图顶部，如下所示：

return (
  elemBottom >= docViewTop &&
  elemTop <= docViewBottom &&
  elemBottom <= docViewBottom &&
  elemTop >= docViewTop
);

希望这会有所帮助！ -迈克尔

使用Brightcove在视口中退出时视频不会暂停吗？

1 个答案: