Svelte中遍历textTracks对象无日志输出，疑与响应性有关

问题根源 #

你用Object.keys(videoElement.textTracks)遍历的方式不对——textTracks是TextTrackList类型的DOM集合，并非普通JavaScript对象。它的轨道项不属于对象的可枚举自有属性，Object.keys()会返回空数组，自然不会进入forEach回调。

另外还要注意两个点：

• Svelte中videoElement是绑定的DOM元素，得确保它挂载完成后再访问
• 视频字幕轨道可能异步加载，初始时textTracks.length可能为0，后续才会新增轨道

修复方案 #

1. 直接使用TextTrackList自带的forEach方法 #

TextTrackList本身实现了迭代器接口，自带forEach方法，可直接遍历轨道：

<script lang="ts">
  let videoElement: HTMLVideoElement;
  $: captionLines = [''];
  $: console.log('captionLines', captionLines);

  // 响应式块：videoElement变化时自动执行
  $: if (videoElement?.textTracks) {
    console.log('textTracks', videoElement.textTracks);
    
    // 直接调用textTracks的forEach遍历轨道
    videoElement.textTracks.forEach((track, index) => {
      console.log(`轨道${index}`, track);
      // 可在此处理轨道内容，比如监听字幕变化
      track.mode = 'showing';
      track.oncuechange = () => {
        const activeCues = track.activeCues;
        if (activeCues?.length) {
          captionLines = Array.from(activeCues).map(cue => cue.text);
        }
      };
    });

    // 监听轨道新增事件，处理异步加载的字幕
    videoElement.textTracks.addEventListener('addtrack', (e) => {
      console.log('新增轨道', e.track);
      // 新增轨道的逻辑处理
    });
  }
</script>

<video bind:this={videoElement} src="your-video-url.mp4" controls></video>

2. 结合onMount确保DOM挂载完成 #

如果需要组件挂载后立即处理轨道，可使用onMount：

<script lang="ts">
  import { onMount } from 'svelte';
  let videoElement: HTMLVideoElement;
  let captionLines = [''];

  onMount(() => {
    if (!videoElement?.textTracks) return;
    
    videoElement.textTracks.forEach(track => {
      console.log('轨道', track);
    });

    videoElement.textTracks.addEventListener('addtrack', (e) => {
      console.log('新增轨道', e.track);
    });
  });
</script>

关键说明 #

• 不要用Object.keys或for...in遍历DOM集合，这类集合有专属的遍历方法（forEach、for...of）
• 字幕轨道加载是异步过程，必须监听addtrack事件才能捕获后续新增的轨道
• Svelte的响应式块（$:）会在videoElement变化时自动触发，适合处理DOM元素相关逻辑

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