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

沉浸式视频体验

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

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

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

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

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 二小

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

链接: https://fly63.com/article/detial/2545