时间戳

首页 > 解决方案 > Tiktok.com 和 Youtube 短片如何在滚动（移动）上自动播放视频？反应 Javascript

javascript - Tiktok.com 和 Youtube 短片如何在滚动（移动）上自动播放视频？反应 Javascript

问题描述

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

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

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

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

标签： javascripthtmlcssreactjs

解决方案

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

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

每次进入 of 的视图时都可以触发一些回调

根据文档一些用例

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

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

  • 目标元素与设备的视口或指定元素相交。出于 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

推荐阅读