使用滚动条控制H5视频进入视窗播放，离开暂停

网页需求：一个项目网站里有多条h5视频，且隐藏了播放键需要自动播放（仿gif的形式），要求只有进入视口的视频播放，离开的视频暂停，可以减少资源占用。
解决方案：遍历所有的video,判断它的高度和离顶部的距离，即可得出当前视频顶部和底部对比滚动条的位置，以此判断视频是否离开视口。
代码如下：

$(document).scroll(function(){
     $('video').each(function(){
         var topnum = $(this).offset().top - $(document).scrollTop();
         var bottomnum = window.innerHeight - (topnum + $(this).height());
         if((topnum > 0) && (bottomnum > 0)){
             $(this)[0].play();
         }else{
             $(this)[0].pause();
         }
     })
})

注：UIkit框架自动集成了此功能，只需要给video加 uk-video属性即可。