往下浏览滚动页面 .. 如果英雄区不在可视范围以内，在上面播放视频有点浪费。 我们可以找一种方法，当滚动页面越过英雄区的一定范围以后，可以暂停播放视频，向上滚动超过一定程度视频又会继续播放 ...

这里我们可以使用 semantic ui 里的 visibility ... 要项目里的 semantic .. components 下面，你可以找到这个 visibility 脚本 ...

把它嵌入到你想使用它的页面上 ...

这里我在产品页面上用了完整版的 semantic ui 的脚本，所以就不需要单独去嵌入它了 ..

再打开项目里的自定义的脚本 ... scripts 下面的 main.js ... 找一个地方，先添加一段注释 .. hero ..

然后找到页面上要使用 visibility 的元素 .. 这里就是 .ui.hero 下面的 带 image 类的 video 元素 ...

用一下 visibility 方法 ... 然后给它一个对象参数，在这个对象里面，你可以去配置一下 visibility 的一些行为 .. 这些配置的选项你都可以在 semantic ui 官方的 visibility 文档里找到 ..

先用一个 once ，把它设置成 false ... 再把 continuous 设置成 true ...

visibility 提供了很多回调，这里我要用的是 onPassing .. 它是一个方法 ... 里面有个 calculations 参数 ..

滚动页面的时候，这个 calculations [kælkjʊ'leɪʃnz] 里面会包含一些有用的信息，比如是不是越过了元素的顶部，或者底部之类的信息 ..

这个参数里的 percentagePassed 属性表示的是滚动越过了元素的百分比 .. 在这个方法里，我们可以判断一下 ... 看看 calculations 里的 percentagePassed 的值是不是大于 0.3 ，也就是滚动页面已经越过了 30% 的视频元素 .. 这个时候，我们可以暂停播放视频 ..

用一下 $(this).get(0)，得到这个视频元素 ...

再用一下视频元素的 pause 方法，它可以停止播放视频 .. 因为我们用的这个 pause 方法属于 video 这个 dom 元素，jquery 里面并没有这个方法，所以这里我们用了一个 get(0) ，得到 jQuery 对象里的这个视频元素 ...

再用一个 else .. $(this).get(0).play() ... play 这个方法可以播放视频 ..

回到浏览器，去试一下 ...

向下滚动页面 ... 越过 30% 左右这个视频元素，就会停止播放视频 ..... 再向上滚动 ... 到一定程度，视频又会继续播放 ...