React JSX落地页实现视频2倍速播放问题求助

报错原因 #

你遇到的TypeScript报错是因为playbackRate不是React JSX中<video>标签的合法props，它是HTMLVideoElement DOM实例的属性，不能直接在JSX上声明，因此TypeScript会提示属性不存在。

可靠实现方案 #

要实现「滚动到视频时2倍速播放」，需要通过React的useRef获取视频DOM元素，结合IntersectionObserver（浏览器原生的高效视口检测API）判断视频是否进入用户视野，再动态设置playbackRate属性。

完整代码示例

import { useRef, useEffect } from 'react';

const VideoSection = () => {
  // 创建两个视频的DOM引用
  const mainVideoRef = useRef<HTMLVideoElement>(null);
  const floatVideoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    // 视口交叉检测的回调逻辑
    const handleIntersection = (entries: IntersectionObserverEntry[]) => {
      entries.forEach(entry => {
        const video = entry.target as HTMLVideoElement;
        if (entry.isIntersecting) {
          // 视频进入视口时设置2倍速
          video.playbackRate = 2;
        } else {
          // 视频离开视口时重置为1倍速（可选）
          video.playbackRate = 1;
        }
      });
    };

    // 初始化交叉观察器
    const observer = new IntersectionObserver(handleIntersection, {
      threshold: 0.1, // 当视频10%进入视口时触发逻辑
    });

    // 为两个视频添加观察
    mainVideoRef.current && observer.observe(mainVideoRef.current);
    floatVideoRef.current && observer.observe(floatVideoRef.current);

    // 组件卸载时清理观察器
    return () => {
      mainVideoRef.current && observer.unobserve(mainVideoRef.current);
      floatVideoRef.current && observer.unobserve(floatVideoRef.current);
      observer.disconnect();
    };
  }, []);

  return (
    <div className="relative inline-flex flex-col">
      <video
        ref={mainVideoRef}
        className="md:max-w-none mx-auto rounded"
        width={500}
        height={462}
        autoPlay
        muted
        loop
      >
        <source src="/videos/DatasetDealFacilitation.mov" type="video/mp4" />
      </video>
      <video
        ref={floatVideoRef}
        className="md:max-w-none absolute w-full left-0 transform animate-float"
        width={500}
        height={44}
        autoPlay
        muted
        loop
        style={{ top: '30%' }}
      />
    </div>
  );
};

export default VideoSection;

关键细节说明

• IntersectionObserver优势：相比监听scroll事件，它是异步原生API，性能更优，不会因频繁滚动触发大量回调。
• DOM操作时机：必须在视频元素挂载后才能访问playbackRate属性，因此通过useEffect和ref组合实现。
• 自动播放兼容性：现代浏览器要求视频必须设置muted才能自动播放，你的代码已满足该条件。
• TypeScript类型处理：通过useRef<HTMLVideoElement>(null)指定类型，避免类型报错。

关于你的临时方案 #

预保存2倍速视频的方式虽然能绕过报错，但会增加资源体积和加载压力，不如动态设置playbackRate灵活高效。

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