javascript - Tiktok.com 和 Youtube shorts 如何自动滚动播放视频(在移动设备上)？ react Javascript

Question

我正在尝试使用 React JS 制作一个类似于 Tiktok 的网站，滚动时，下面的视频将播放(有音频，我知道没有音频会容易得多)。

我尝试使用 window.addEventListener("scroll",...) 进行设置。但在进一步研究中，这似乎不起作用，因为滚动不是允许在移动设备上播放视频的“有效用户输入”。

经过更多研究后，似乎可以播放然后暂停来自初始用户输入点击的所有视频。尽管我仍在研究如何通过单一输入播放/暂停所有视频。

无论如何，我的问题是像 tiktok.com 和 youtube shorts 这样的网站如何在滚动时自动播放有声视频？他们是如何实现的？

Answer 1

我相信有很多方法可以做到这一点。

我会做的一种方法是使用 Intersection Observer API

每次进入of的 View 都可以触发一些回调

根据文档的一些用例

• 在页面滚动时延迟加载图像或其他内容。
• 实现“无限滚动”网站，在您滚动时加载和呈现越来越多的内容，这样用户就不必翻阅页面。
• 报告广告可见度以计算广告收入。
• 根据用户是否会看到结果来决定是否执行任务或动画过程。

Intersection Observer API 允许您配置在以下任一情况发生时调用的回调:

• 目标元素与设备的视口(viewport)或指定元素相交。出于 Intersection Observer API 的目的，该指定元素称为根元素或根。
• 第一次最初要求观察者观察目标元素。

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

// or

var intersectionObserver = new IntersectionObserver(function(entries) {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

我制作了一个用于延迟加载的小 npm 包。

https://www.npmjs.com/package/dyno-img-react

它基本上显示低分辨率图像，直到用户到达元素(我可以配置交叉区域)。一旦到达，我将获取高质量图像，并移除观察者

如果是 RN，我最近没有真正在 RN 上工作，但你可以看看这个库

react-native-intersection-observer

它有一个实现，您可以在此处的代码中看到它。

https://github.com/zhbhun/react-native-intersection-observer/blob/master/src/IntersectionObserver.ts

内部使用onLayout事件管理

import { IOScrollView, InView } from 'react-native-intersection-observer'

const Component = () => (
  <IOScrollView>
    <InView onChange={(inView: boolean) => console.log('Inview:', inView)}>
      <Text>Plain children are always rendered. Use onChange to monitor state.</Text>
    </InView>
  </IOScrollView>  
)

export default Component