当视频帖子进入/退出滚动视图时，Facebook 如何处理停止视频帖子？答案

【问题标题】：How does facebook handle stopping video posts when they're in/out of scroll view?当视频帖子进入/退出滚动视图时，Facebook 如何处理停止视频帖子？
【发布时间】：2016-07-03 11:53:32
【问题描述】：

我正在尝试在 React 中构建实时提要，但遇到了关于自动循环视频的性能问题，因为当视频在视口中消失时，没有 API 可以自动暂停它们。

Facebook 已经相当有效地解决了这个问题，方法是（看起来）在看不见的时候卸载视频，并在它重新进入视野时重新安装。

我正在尝试模仿这种行为，但我不确定从哪里开始。是否可以随意卸载和重新安装组件？

有人对解决这个问题有什么建议吗？

插件和代码 sn-ps 绝对受欢迎！！

【问题讨论】：

Pause and play video when in viewport的可能重复
当有很多很多视频时，我更喜欢处理无限滚动的方法。我还想要一个 React 解决方案，而不是 jQuery 解决方案。
有一个名为scrollmonitor 的库，其中包含进入视口和退出视口等内容。话虽这么说，你想要这样的东西吗？还是无限滚动？

标签： javascript html video reactjs

【解决方案1】：

是否可以随意卸载和重新安装组件

是的。本质上，您订阅了滚动的 dom 元素（可能是也可能不是 body）上的 scroll 位置，然后检查您是否在视口中。如果不是，您只需关闭视频元素。类似的东西：

// your render function 
render() {
   return  <div>{this.state.isInViewPort && <video/>}</div>
}

【讨论】：