React如何实现TikTok、YouTube Shorts移动端滚动带音频自动播放视频？

TikTok/YouTube Shorts 实现原理 #

• 移动端浏览器对带音频媒体的播放限制规则为：仅用户主动交互（点击、触摸、物理按键）可以触发播放，滚动、定时器、页面加载回调都不属于有效交互，无法绕过拦截。
• 两类产品的核心逻辑就是你调研到的「首次交互预授权」方案，完整流程如下：
  1. 页面加载后，在全局容器监听首次用户交互事件（touchstart/click）
  2. 首次交互触发时，立刻对所有预加载的视频元素依次执行play() + 立即pause()操作，该操作在有效交互回调内执行，不会被浏览器拦截，同时会给所有执行过该操作的视频元素打上「用户授权可播放」标记，后续无需再次交互即可直接控制播放状态
  3. 后续滚动监听逻辑中，只需要判断当前处于视口内的目标视频，直接调用play()，移出视口的视频调用pause()即可
• 额外优化逻辑：产品会采用分片加载方案，仅预加载当前播放位和前后1-2个视频的音视频流，既降低内存占用，也能减少首次授权时的播放卡顿概率。

React 端落地实现步骤 #

• 第一步：在根组件绑定首次交互监听，标记授权状态

import { useState, useCallback, useEffect } from 'react';

function App() {
  const [isMediaAuthorized, setIsMediaAuthorized] = useState(false);

  // 首次用户交互处理，仅执行一次
  const handleFirstInteract = useCallback(async () => {
    if (isMediaAuthorized) return;
    // 获取所有预加载的视频节点
    const preloadVideos = document.querySelectorAll('video.preload');
    for (const video of preloadVideos) {
      try {
        await video.play();
        video.pause();
        video.currentTime = 0;
      } catch (e) {
        console.warn('视频授权失败', e);
      }
    }
    setIsMediaAuthorized(true);
  }, [isMediaAuthorized]);

  return <div onClick={handleFirstInteract} onTouchStart={handleFirstInteract}>
    {/* 视频列表组件 */}
    <VideoList />
  </div>
}

• 第二步：实现滚动切换播放逻辑，仅授权完成后生效

function VideoList() {
  const [isMediaAuthorized] = useAuthState(); // 从全局状态取授权标记

  useEffect(() => {
    if (!isMediaAuthorized) return;

    const handleScroll = () => {
      // 自定义逻辑：计算当前处于视口中心的视频节点
      const activeVideo = calcActiveVideo();
      // 暂停所有非活跃视频
      document.querySelectorAll('video').forEach(v => {
        if (v !== activeVideo && !v.paused) v.pause()
      });
      // 播放当前活跃视频
      if (activeVideo && activeVideo.paused) activeVideo.play();
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [isMediaAuthorized]);

  // 渲染视频列表
  return <div className="video-list">{/* 多个video项 */}</div>
}

• 注意事项：
  • 预加载的视频不要设置autoplay属性，避免触发浏览器拦截
  • 如果后续有懒加载的新视频渲染，完成渲染后手动执行一次play() + pause()即可拿到播放授权，无需用户再次交互
  • 不需要动态修改视频的muted属性，授权完成后默认即可输出音频

内容的提问来源于stack exchange，提问作者willmhunt1