如何将YouTube iframe的观看时长存储到数据库

第一步：改造现有iframe启用API支持 #

首先需要给iframe的src追加enablejsapi=1参数，才能调用YouTube官方iframe接口获取播放状态和进度数据，改造后的代码如下：

<iframe
    src={`https://www.youtube.com/embed/${curvideo}?enablejsapi=1`}
    frameBorder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    className="w-full h-full absolute top-0 left-0 rounded-st"
    id="youtube-player"
></iframe>

第二步：React环境下的进度跟踪实现 #

直接上可复用的组件代码，核心逻辑完全避免每秒更新数据库的冗余操作：

import { useEffect, useRef } from 'react';

const YouTubePlayer = ({ curvideo }) => {
  const playerRef = useRef(null);
  const lastSavedPercentRef = useRef(0);
  // 自定义存储阈值：进度变化超过5%/间隔30秒才触发存储，可按需调整
  const PROGRESS_THRESHOLD = 5;
  const CHECK_INTERVAL = 30 * 1000;

  useEffect(() => {
    // 加载YouTube IFrame API
    if (!window.YT) {
      const tag = document.createElement('script');
      tag.src = 'https://www.youtube.com/iframe_api';
      window.onYouTubeIframeAPIReady = initPlayer;
      document.body.appendChild(tag);
    } else {
      initPlayer();
    }

    function initPlayer() {
      playerRef.current = new window.YT.Player('youtube-player', {
        events: {
          'onStateChange': handleStateChange,
        }
      });

      // 播放中定时校验进度
      const timer = setInterval(() => {
        if (playerRef.current?.getPlayerState() === 1) { // 状态1代表播放中
          const currentTime = playerRef.current.getCurrentTime();
          const totalTime = playerRef.current.getDuration();
          const percent = (currentTime / totalTime) * 100;
          if (Math.abs(percent - lastSavedPercentRef.current) >= PROGRESS_THRESHOLD) {
            saveProgress(currentTime, percent);
          }
        }
      }, CHECK_INTERVAL);

      // 页面退出/隐藏时强制同步进度兜底
      const syncOnExit = () => {
        if (playerRef.current) {
          saveProgress(playerRef.current.getCurrentTime(), null, true);
        }
      };
      window.addEventListener('beforeunload', syncOnExit);
      document.addEventListener('visibilitychange', () => document.hidden && syncOnExit());

      return () => {
        clearInterval(timer);
        window.removeEventListener('beforeunload', syncOnExit);
        syncOnExit();
        playerRef.current?.destroy();
      };
    }

    // 播放状态变更触发存储：暂停/播放结束时直接存
    function handleStateChange(event) {
      if (event.data === 2 || event.data === 0) { // 2为暂停，0为播放结束
        const currentTime = playerRef.current.getCurrentTime();
        const totalTime = playerRef.current.getDuration();
        saveProgress(currentTime, (currentTime / totalTime) * 100);
      }
    }

    // 进度存储逻辑
    function saveProgress(currentTime, percent = null, isForce = false) {
      const calcPercent = percent || (currentTime / playerRef.current.getDuration()) * 100;
      // 先写入本地缓存兜底，避免断网/接口失败丢失进度
      localStorage.setItem(`yt_progress_${curvideo}`, currentTime);
      // 阈值校验通过才调用后端接口更新数据库
      if (isForce || Math.abs(calcPercent - lastSavedPercentRef.current) >= PROGRESS_THRESHOLD) {
        // 此处替换为你自己的后端存储接口逻辑
        fetch('/api/save-video-progress', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            videoId: curvideo,
            progress: currentTime,
            progressPercent: calcPercent
          })
        });
        lastSavedPercentRef.current = calcPercent;
      }
    }
  }, [curvideo]);

  return (
    <iframe
      src={`https://www.youtube.com/embed/${curvideo}?enablejsapi=1`}
      frameBorder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      className="w-full h-full absolute top-0 left-0 rounded-st"
      id="youtube-player"
    />
  );
};

export default YouTubePlayer;

核心优化说明 #

• 事件驱动优先：仅在视频暂停、播放结束、用户跳转进度、页面退出/隐藏这几个关键节点触发存储，直接砍掉90%以上的无效数据库写入
• 阈值过滤：仅当进度变化超过设定的百分比阈值时才触发存储，避免小幅度进度变动带来的冗余请求
• 本地缓存兜底：所有进度优先存在本地存储中，就算后端请求失败、断网也不会丢失进度，下次打开页面可以优先读取本地缓存再和后端同步
• 可扩展批量同步：如果用户量级较大，还可以把多个视频的进度变更攒到一定数量后一次性批量同步到后端，进一步降低数据库写入压力

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