如何实现沉浸式视频体验？
沉浸式视频体验
上周产品小哥哥丢过来一个需求，名曰：沉浸式视频体验，大致内容是一个页面里有几十个视频，用户点击其中一个视频时，该视频自动滑动到屏幕可视区域的顶部开始播放，并暂停其他视频，该视频滑出屏幕可视区域之后要自动暂停。
这个需求有两个关键的技术点：
- 如何将视频滑动到屏幕可视区域的顶部
- 如何判断视频滑出了屏幕可视区域
其实这两个技术点有一个共同点，就是需求计算出元素在页面中的绝对位置，也就是指该元素的左上角相对于整张网页左上角的坐标，有两种方法可以计算得到：
1.递归
利用offsetTop和offsetLeft可以取到当前元素左上角相对于其HTMLElement.offsetParent节点的左边界偏移的像素值，然后再利用HTMLElement.offsetParent
可以得到一个指向最近的包含该元素的定位元素。
如果没有定位的元素，则offsetParent为最近的table,table cell或根元素（标准模式下为html；quirks模式下为body）。
利用以上三个属性，写一个递归函数就可以得到当前元素在页面中的绝对位置了：
const getElementLeft = element => {
let actualLeft = element.offsetLeft;
let current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
const getElementTop = element => {
let actualTop = element.offsetTop;
let current = element.offsetParent;
while (current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}注意：由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用。
2. 你听说过getBoundingClientRect吗？
object.getBoundingClientRect()的返回值包含了一组只读属性，包括该元素相对于视口左上角位置的left、top、right和bottom，以及元素的width和height，单位为像素，具体含义可参见下图：
从上图可以看出，getBoundingClientRect得到的值是相对于视口的，而不是绝对的，当视口区域或其他可滚动元素内发生滚动操作时，top和left属性值就会随之立即发生变化。
要获得相对于整个网页左上角定位的属性值，只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的值。
如何将视频滑动到屏幕可视区域的顶部？
考虑到getBoundingClientRect的兼容性较好，且算法复杂度较低，最终我采用了getBoundingClientRect方法来实现“将视频滑动到屏幕可视区域的顶部”的功能，使用window.scroll来实现页面滚动，使用setTimeout增加滚动时的动画，具体实现滚动的函数如下：
const autoScroll = (offsetTop, needScrollTop, hasScrollTop) => {
let _needScrollTop = needScrollTop; // 本次递归时，离终点的距离
let _hasScrollTop = hasScrollTop; // 本次递归时，已经移动的距离总和
const speed = 10;
setTimeout(() => {
const dist = needScrollTop > 0
? Math.max(Math.ceil(needScrollTop / speed), 5)
: Math.min(Math.ceil(needScrollTop / speed), -5);
_needScrollTop -= dist;
_hasScrollTop += dist;
window.scroll(0, offsetTop + _hasScrollTop);
// 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
if (_needScrollTop > speed || _needScrollTop < -speed) {
this.__onScroll(offsetTop, _needScrollTop, _hasScrollTop);
} else {
window.scroll(0, offsetTop + _hasScrollTop + _needScrollTop);
}
}, 1);
}
const rect = element.getBoundingClientRect();
const offsetTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || window.screenY;
autoScroll(offsetTop, rect.top, 0);如何判断视频滑出了屏幕可视区域？
利用getBoundingClientRect的返回值同样可以判断元素在屏幕可视区域的曝光和滑出，通过监听页面的滚动事件，在滚动结束时，触发checkLeave和checkExpose函数，具体代码如下：
// 检测滑出可视区域
checkLeave() {
const element = document.querySelector(`[data-action-id="${this.__domId}"]`);
if (!element) {
console.error(`Action: element [data-action-id="${this.__domId}"] not found`);
return;
}
const { top, bottom, left, right } = element.getBoundingClientRect();
if ((top > getWindowHeight() || bottom < 0
|| left > getWindowWidth() || right < 0)) {
this.onLeave(); //onLeave函数中实现具体业务逻辑
}
}
// 检测真实曝光
checkExpose() {
const element = document.querySelector(`[data-action-id="${this.__domId}"]`);
if (!element) {
console.error(`Action: element [data-action-id="${this.__domId}"] not found`);
return;
}
const { top, bottom, left, right } = element.getBoundingClientRect();
if (Math.max(0, top) <= Math.min(getWindowHeight(), bottom)
&& Math.max(0, left) <= Math.min(getWindowWidth(), right)) {
this.onExpose(); //onExpose函数中实现具体业务逻辑
}
}可以将这两个事件封装成了一个<Action>组件的两个props参数，使用时只需要在需要的元素外包一层<Action>父元素，并传入特定的回调函数即可。
BTW，多说一句我实现document.querySelector的原理，直接看代码：
render() {
const { children } = this.props;
return cloneElement(Children.only(children), {
'data-action-id': this.__domId,
});
}以上。
作者：TNFE 二小
团队推广
TNFE团队为前端开发人员整理出了小程序以及web前端技术领域的最新优质内容，每周更新✨，欢迎star，github地址：https://github.com/Tnfe/TNFE-Weekly
欢迎加入腾讯前端技术交流QQ群：784383520