Next.js中next-video字幕重复与叠加问题修复咨询

问题根源 #

1. next-video组件切换视频源时，不会自动清理旧的<track>元素，导致新旧字幕叠加显示
2. 状态更新不及时：切换视频时matchedSubtitle未先重置为null，仍保留旧值直到新匹配完成
3. 无字幕视频切换时，matchedSubtitle未被正确重置，导致残留之前的字幕

修复步骤 #

• 给Video组件绑定唯一key（基于selectedVideo的标识，如name），强制视频切换时重新渲染组件，彻底清理旧的track元素
• 在useEffect中先重置matchedSubtitle为null，再执行字幕匹配逻辑，确保状态及时同步
• 优化匹配判断，明确处理selectedVideo不存在的情况

修改后的完整代码 #

"use client";
import { useGlobalContext } from "@/provider/state-manager";
import Video from "next-video";
import { useEffect, useState } from "react";

export default function VidPlayer({ selectedVideo }) {
  const { state }: Context = useGlobalContext();
  const subtitles = state.subtitle || [];
  const [matchedSubtitle, setMatchedSubtitle] = useState<any>(null);

  useEffect(() => {
    // 切换视频时先重置字幕状态
    setMatchedSubtitle(null);
    
    if (!selectedVideo) return;
    
    const matched = subtitles.find((data: any) => {
      const videoName = selectedVideo.name?.split(".")[0];
      const subtitleName = data.name?.split(".")[0];
      return videoName === subtitleName;
    });
    
    setMatchedSubtitle(matched || null);
  }, [selectedVideo, subtitles]);

  return (
    <div>
      {selectedVideo?.url && (
        <Video
          src={selectedVideo.url}
          // 添加key强制视频切换时重新渲染组件
          key={selectedVideo.name}
        >
          {matchedSubtitle && (
            <track
              key={matchedSubtitle.id}
              src={matchedSubtitle.url}
              default
              kind="subtitles"
              srcLang="en"
              label="English"
            />
          )}
        </Video>
      )}
    </div>
  );
}

关键改动说明 #

1. Video组件添加key：通过key={selectedVideo.name}，确保每次切换视频时React销毁旧组件并创建新实例，彻底清除之前的track元素
2. 先重置状态再匹配：在useEffect开头调用setMatchedSubtitle(null)，避免切换视频时短暂显示旧字幕
3. 明确空值判断：增加if (!selectedVideo) return，防止空值情况下执行匹配逻辑，确保状态正确

内容的提问来源于stack exchange，提问作者Aakash Bandhu Aryal