昨天我们组里的前端开发收到了一个比较蛋疼的需求,怎么也想不出来,于是和我分享了一下:网页端有一个视频,产品要求当视频离开可视区域的时候自动暂停播放,当回到可视区域的时候再自动播放。我们来理一下思路。

首先我们要确定“视频离开可视区域”,这句话代表了什么。包含两块:1.当在浏览器切换标签页时,视频无法可视。2.当切换到其他软件的时候,即浏览器的优先级小于其他软件的时候,视频无法可视。那我们就来解决这两个问题。

1:当在浏览器切换标签页时,视频无法可视

这个相当于在浏览器切换tab时运用的事件,刚好js有一个事件:visibilitychange (页面可见性改变事件),简单的说当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该事件,现在主流的浏览器都支持该消息了,例如Chrome, Firefox, IE10等。配合事件监听代码如下:

document.addEventListener("visibilitychange", handleVisibilityChange, false);

function handleVisibilityChange() {
if (document['hidden']) {
videoElement(定位元素).pause();
} else {
videoElement(定位元素).play();

}
}

2.当切换到其他软件的时候,即浏览器的优先级小于其他软件的时候,视频无法可视

这个动作就很蛋疼了,举一个场景:本来你在浏览器正在看视频,突然微信上有人找你,然后你打开微信恢复别人,这个时候浏览器的播放暂停了,当你回复完回到浏览器继续看的时候,视频又自动播放了。这个动作看似已经超出了浏览器的监听范围了,其实另有玄机。一开始我也是一头雾水,后来我突然想到一款游戏:植物大战僵尸pc版本,玩过这款游戏的人都有这个经历,当鼠标离开游戏框的时候,游戏会自动暂停,他是不是有可能依然监听的是自身的状态?于是我一段猛如虎的搜索果然搜到了答案。

其实很简单,只需要监听浏览器是否获得焦点就可以了

js: Window.blur() 将焦点移出顶层窗口
jq:$(window).blur(function(){})
上面指的是当浏览器被切换出去时的动作,即失去焦点时
js: Window.focus() 获得焦点
jq:$(window).focus(function(){})
上面指的是当浏览器被切换回优先级为一的时候,即获得焦点时

就上述需求而言,将两个方法结合一下监听出来就会得到想要的效果。