《小白HTML5成长之路39》如何通过滚动页面控制视频播放和停止

“小白，你仔细想一想网页上的视频什么情况下需要使用javascript进行操作？”

“我把video的标签属性看了一下，感觉标签的属性已经可以实现所有功能了，autoplay属性可以让视频自动播放、controls属性可以给视频增加播放控件、loop属性能让视频循环播放、preload属性可以实现预加载，功能已经很完善了，还需要javascript控制么？”

老朱说：“当然需要了，video标签自带的属性只是实现了视频的播放控制功能。假如一个页面有几个产品展示的视频，最好的展现效果就是视频自动播放给用户看，可是一个页面有好几个视频，通过标签只能设定一个视频自动播放，都设置自动播放的话页面就乱套了，这种情况下最好的解决办法就是用户滚动页面的时候，根据用户的浏览位置用javascript对视频进行自动播放。”

“哦！我明白了，有一些网站就是这么做的！可是怎么判断用户当前滚动的位置呢？”

“这个问题看似简单，其实还是很复杂的，我们除了需要获取用户当前滚动页面距离顶部的距离，还需要获取当前窗口的高度，每个视频距离文档顶部的距离，获取到这几数据才能做处理。”

小白想了想，说道：“哦！我明白了，稍等我先查一下获取这几个距离的方法！”

过了一会小白跟老朱说道：“我在页面里放了两个视频他们之间有一定的距离，现在我已经能拿到这几个数据了。你看一下代码吧！”

老朱看了一下说：“不错，你觉得视频在什么位置适合播放，什么位置不适合播放，可以自己先试着计算一下。如果一屏不同时出现两个视频，我们一般选择视频上部完全进入窗口，和视频下部刚刚移出窗口两个边界作为播放视频的区域！”

没过多长时间小白就算出了结果：$("#video1").offset().top-$(document).scrollTop()>0就可以看作视频顶部完全进入屏幕，window.innerHeight-(topnum1+$("#video1").height())>0可以看作视频下部没有移出屏幕，所以我使用了一下jquery的scroll（窗口滚动事件），在页面滚动过程中进行实时判断：

“干的不错，不过两个视频处理方面代码有些重复了，还需要精简，好了现在把两个video的div中根据昨天讲的video标签嵌入视频吧！嵌入以后通过jQuery获取到视频标签对象，使用play方法和pause方法就可以让视频播放和停止了。”

“好嘞！我已经知道怎么做了！”

“小白！很好，现在我们只是初步实现了滚动页面控制视频播放与停止，如果以后碰到类似项目还是要根据需求进行调整，这就看你对video功能处理的熟悉程度了，再多练习练习吧！”

老朱又说道：“另外思考一个问题，假如页面中只有一个视频，当用户浏览网页的时候由于滚动页面视频移出窗口，怎么做一个右下角漂浮的视频继续播放？根据前面你学到的知识已经完全可以实现了，试试看吧！”

---

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！