如何实现沉浸式视频体验？

沉浸式视频体验

上周产品小哥哥丢过来一个需求，名曰：沉浸式视频体验，大致内容是一个页面里有几十个视频，用户点击其中一个视频时，该视频自动滑动到屏幕可视区域的顶部开始播放，并暂停其他视频，该视频滑出屏幕可视区域之后要自动暂停。

这个需求有两个关键的技术点：

如何将视频滑动到屏幕可视区域的顶部
如何判断视频滑出了屏幕可视区域

其实这两个技术点有一个共同点，就是需求计算出元素在页面中的绝对位置，也就是指该元素的左上角相对于整张网页左上角的坐标，有两种方法可以计算得到：

1.递归

利用offsetTop和offsetLeft可以取到当前元素左上角相对于其HTMLElement.offsetParent节点的左边界偏移的像素值，然后再利用HTMLElement.offsetParent
可以得到一个指向最近的包含该元素的定位元素。

如果没有定位的元素，则offsetParent为最近的table,table cell或根元素（标准模式下为html；quirks模式下为body）。

利用以上三个属性，写一个递归函数就可以得到当前元素在页面中的绝对位置了：

const getElementLeft = element =&gt; {let actualLeft = element.offsetLeft;let current = element.offsetParent;while (current !== null){actualLeft += current.offsetLeft;current = current.offsetParent;}return actualLeft;
}
const getElementTop = element =&gt; {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) =&gt; {let _needScrollTop = needScrollTop; // 本次递归时，离终点的距离let _hasScrollTop = hasScrollTop; // 本次递归时，已经移动的距离总和const speed = 10;setTimeout(() =&gt; {const dist = needScrollTop &gt; 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 &gt; speed || _needScrollTop &lt; -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 &gt; getWindowHeight() || bottom &lt; 0|| left &gt; getWindowWidth() || right &lt; 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) &lt;= Math.min(getWindowHeight(), bottom)&amp;&amp; Math.max(0, left) &lt;= 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

来源：https://segmentfault.com/a/1190000018657822