html - 超出视口时如何停止播放html5视频？

Question

我在使用 skrollr 时遇到了这个问题：一切正常，然后在添加视频时，如果超出视口，它会继续播放，即使 div 有 display:none 声明。我尝试在这里和谷歌搜索，但找不到任何东西，此时我真的迷路了。

作为参考，这是我正在使用的代码：

<div id="seventh" class="view" data-0="display:none;top:0%;" data-27000="display:block;opacity:0;" data-29000="opacity:1;" data-32000="opacity:0;" >

<video id="video" class="video-js vjs-default-skin" controls preload="none" width="1223" height="611" poster="img/poster.jpg" data-setup="{}">
<source src="videos/vid.webm" type='video/webm' />
<source src="videos/vid.mp4" type='video/mp4' />

</video>

</div>

任何有关如何实现这一目标的帮助都非常感谢

Answer 1

利用

skrollr.init({
    render: function(data) {
        //get current element opacity and position then play or pause the video
    }
});

有关工作示例，请参见http://jsfiddle.net/ybP6b/