React Slick中心模式下自动播放视频冲突：克隆节点导致后台视频持续播放

核心原因是React Slick开启中心模式+无限滚动（infinite: true）时，会自动克隆前后的slide节点实现无缝滚动效果，克隆节点内的视频也会继承原节点的自动播放属性，导致多视频同时播放。可以通过以下方案解决：

方案1：禁用无限滚动（成本最低） #

如果业务场景不需要无缝无限滚动，直接将Slider配置项的infinite设为false即可关闭节点克隆逻辑，从根源避免多份视频副本生成。

方案2：监听轮播切换事件，仅激活当前展示视频 #

如果需要保留无限滚动能力，通过轮播的生命周期事件控制所有视频的播放状态：

• 切换轮播前暂停上一个激活slide内的视频
• 切换完成后仅播放当前处于激活态的slide内的视频
• 所有带slick-cloned类的克隆节点内的视频默认强制暂停，不参与播放逻辑

代码示例 #

import { useRef } from 'react';
import Slider from "react-slick";

const VideoSlider = () => {
  const sliderRef = useRef(null);

  // 控制仅当前激活slide的视频播放
  const playCurrentVideo = (currentIndex) => {
    // 先暂停所有视频
    const allVideos = document.querySelectorAll('.slick-slide video');
    allVideos.forEach(video => {
      video.pause();
      video.currentTime = 0; // 可选：重置播放进度
    });

    // 仅激活当前非克隆的slide内的视频
    const currentSlide = document.querySelector(`.slick-slide[data-index="${currentIndex}"]:not(.slick-cloned)`);
    if (currentSlide) {
      const currentVideo = currentSlide.querySelector('video');
      currentVideo?.play();
    }
  };

  const settings = {
    centerMode: true,
    infinite: true,
    slidesToShow: 3,
    afterChange: (currentIndex) => {
      playCurrentVideo(currentIndex);
    },
    // 组件挂载后首次触发播放
    onInit: () => {
      playCurrentVideo(0);
    }
  };

  return (
    <Slider ref={sliderRef} {...settings}>
      {/* 你的slide内容，每个slide包含一个video元素 */}
      <div>
        <video src="你的视频地址" controls />
      </div>
      {/* 其余slide省略 */}
    </Slider>
  )
}

方案3：动态渲染视频内容 #

仅当slide处于激活状态时才渲染video元素，非激活的slide仅渲染视频封面占位图，彻底避免克隆节点生成视频副本。这种方案性能最优，还能减少不必要的资源加载。

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