如何获取Twitch嵌入直播流的当前播放时间？

核心问题在于：通用视频播放器库（比如ReactPlayer）和原生iframe都无法适配Twitch直播流的时间获取逻辑——直播流没有固定总时长，第三方库的时间监听逻辑是为点播视频设计的，因此拿不到正确的当前时间，暂停后时间归零也属于适配缺失导致的问题（该逻辑对YouTube点播视频有效，是因为点播视频有明确的时间轴）。

原因分析 #

• 直播流的时间模型和点播视频完全不同：直播没有“已播放时长”的固定概念，时间实时推进，无预设总时长。
• 通用播放器库（如ReactPlayer）未适配Twitch直播的特殊接口，getCurrentTime()等方法无法正确读取直播流的时间数据。
• 原生iframe受跨域限制，无法直接访问Twitch播放器内部的时间状态。

解决方案：使用Twitch官方Player SDK #

Twitch提供的Player SDK完美适配直播流的状态监听和数据获取，以下是具体实现代码：

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

export const GameData = () => {
  const [videoTime, setVideoTime] = useState<number>(0);
  const playerContainerRef = useRef<HTMLDivElement>(null);
  const twitchPlayerRef = useRef<any>(null);

  useEffect(() => {
    // 加载Twitch Player官方脚本
    const script = document.createElement('script');
    script.src = 'https://player.twitch.tv/js/embed/v1.js';
    script.async = true;
    script.onload = initTwitchPlayer;
    document.body.appendChild(script);

    // 组件卸载时清理资源
    return () => {
      document.body.removeChild(script);
      twitchPlayerRef.current?.destroy();
    };
  }, []);

  const initTwitchPlayer = () => {
    if (!playerContainerRef.current || !window.Twitch?.Player) return;

    // 初始化Twitch播放器
    twitchPlayerRef.current = new window.Twitch.Player(playerContainerRef.current, {
      channel: 'liveoliverr', // 替换为目标Twitch频道名
      width: '100%',
      height: 480,
      controls: true,
    });

    // 监听时间更新
    twitchPlayerRef.current.addEventListener('timeupdate', () => {
      const currentTime = twitchPlayerRef.current.getCurrentTime();
      setVideoTime(currentTime);
      console.log('当前直播时间:', currentTime);
    });

    // 监听播放/暂停事件
    twitchPlayerRef.current.addEventListener('play', () => {
      const currentTime = twitchPlayerRef.current.getCurrentTime();
      setVideoTime(currentTime);
      console.log('直播播放，当前时间:', currentTime);
    });

    twitchPlayerRef.current.addEventListener('pause', () => {
      const currentTime = twitchPlayerRef.current.getCurrentTime();
      setVideoTime(currentTime);
      console.log('直播暂停，当前时间:', currentTime);
    });
  };

  return (
    <div>
      <pre className="whitespace-pre-wrap text-white">
        {/* 保留你原有内容 */}
      </pre>
      {/* Twitch播放器容器 */}
      <div ref={playerContainerRef}></div>
      <pre className="whitespace-pre-wrap">当前直播时长: {videoTime.toFixed(2)}秒</pre>
    </div>
  );
};

说明 #

• Twitch官方Player通过postMessage机制解决了跨域问题，能直接获取直播流的实时时间数据。
• getCurrentTime()返回的是从直播开始到当前的累计时长，暂停时会保留当前时间戳，不会归零。
• 若需要更多直播相关状态（如直播是否在线、观众数等），还可通过Twitch API进一步扩展。

内容的提问来源于stack exchange，提问作者Eliška Pavlů