如何使用JS结合react-youtube检测YouTube视频播放是否达90%进度

核心逻辑 #

• 为YouTube嵌入开启JS API控制权限，用于读取播放器状态、视频总时长、当前播放进度等数据
• 监听播放器就绪事件，获取播放器实例
• 视频处于播放状态时定时同步当前播放进度，计算进度占总时长的比例
• 新增触发锁标识，首次达到90%进度时执行自定义业务逻辑，避免重复触发

代码实现 #

第一步：安装依赖 #

执行安装命令：
npm install react-youtube

第二步：组件代码示例 #

import YouTube from 'react-youtube';
import { useRef } from 'react';

const YoutubePlayer = ({ youtubeId }) => {
  // 90%进度触发锁，避免重复执行操作
  const hasTriggered = useRef(false);
  // 存储播放器实例
  const playerIns = useRef(null);

  // 播放器基础配置
  const playerOpts = {
    height: '390',
    width: '640',
    playerVars: {
      // 必须开启JS API权限
      enablejsapi: 1,
      // 可根据需求自定义其他播放参数，比如自动播放、是否显示控件等
      autoplay: 0,
      controls: 1
    },
  };

  // 播放器就绪回调，获取实例
  const onPlayerReady = (e) => {
    playerIns.current = e.target;
  };

  // 播放器状态变更回调
  const onPlayerStateChange = (e) => {
    // 状态值为1代表视频正在播放
    if (e.data === 1) {
      // 每1秒拉取一次进度，可根据精度需求调整间隔
      const timer = setInterval(() => {
        if (!playerIns.current) return;
        // 当前播放时长，单位：秒
        const currentTime = playerIns.current.getCurrentTime();
        // 视频总时长，单位：秒
        const totalDuration = playerIns.current.getDuration();
        // 计算播放进度
        const playProgress = currentTime / totalDuration;

        // 进度达到90%且未触发过业务逻辑
        if (playProgress >= 0.9 && !hasTriggered.current) {
          hasTriggered.current = true;
          clearInterval(timer);
          // 在此处写入你要执行的自定义操作
          console.log('用户已播放90%以上视频内容');
          // 你的业务逻辑代码...
        }

        // 视频暂停/结束时清除定时器
        const currentState = playerIns.current.getPlayerState();
        if (currentState !== 1) {
          clearInterval(timer);
        }
      }, 1000);
    }
  };

  return (
    <YouTube
      videoId={youtubeId}
      opts={playerOpts}
      onReady={onPlayerReady}
      onStateChange={onPlayerStateChange}
    />
  );
};

export default YoutubePlayer;

注意事项 #

• 如果需要避免用户快进直接跳转到90%触发逻辑，可以额外增加有效播放时长统计，只有实际播放的时长累计达到总时长90%时再触发
• 进度检测的时间间隔可自行调整，间隔越短精度越高，对应的性能开销也会略微提升
• 如果需要用户刷新页面后仍保留触发状态，可以将触发锁的状态存储到localStorage或服务端
  内容的提问来源于stack exchange，提问作者User123123