如何在react-player中实时渲染YouTube视频当前播放速率

完全可以实现播放速率和YouTube内置控制条的操作同步，不需要手动重新接入YouTube iFrame API，react-player已经封装了底层iFrame实例的获取能力，按下面步骤操作即可。

步骤1：绑定ref获取组件实例 #

用React的ref持有ReactPlayer组件实例，用来后续调用内部方法、获取原生播放器对象，函数组件实现示例：

import { useRef, useState } from 'react'
import ReactPlayer from 'react-player'

export default function VideoPlayer() {
  // 持有播放器组件实例
  const playerRef = useRef(null)
  // 存储页面需要渲染的当前播放速率
  const [playbackRate, setPlaybackRate] = useState(1)

  return (
    <div className="player-wrapper">
      <ReactPlayer
        ref={playerRef}
        url="你的YouTube视频地址"
        // 其他原有配置，比如controls、width、height等
      />
      {/* 页面渲染的速率显示 */}
      <div className="rate-display">当前播放速率：{playbackRate}x</div>
      {/* 你原有的速率切换按钮逻辑保留即可 */}
    </div>
  )
}

步骤2：同步内置控制条修改的速率 #

新手推荐用最简单的无事件绑定方案：利用react-player自带的onProgress回调（播放过程中每几百毫秒自动触发一次），在回调里读取当前原生播放器的实际速率，和本地状态对比，不一致就更新：

const handleProgress = () => {
  if (!playerRef.current) return
  // 获取对应平台的原生播放器实例，YouTube源下就是iFrame API的player对象
  const internalPlayer = playerRef.current.getInternalPlayer()
  // 加类型判断，避免切换到其他非YouTube视频源时报错
  if (internalPlayer && typeof internalPlayer.getPlaybackRate === 'function') {
    const realTimeRate = internalPlayer.getPlaybackRate()
    // 只有速率真的变化时才更新状态，避免不必要的重渲染
    if (realTimeRate !== playbackRate) {
      setPlaybackRate(realTimeRate)
    }
  }
}

把这个回调传给ReactPlayer组件的onProgress属性即可：

<ReactPlayer
  ref={playerRef}
  url="你的YouTube视频地址"
  onProgress={handleProgress}
  // 其他原有配置
/>

注意事项 #

• 不要在播放器加载完成前调用getInternalPlayer()，否则会返回null报错，所有对原生实例的操作都要确保播放器已经就绪。
• 必须加typeof internalPlayer.getPlaybackRate === 'function'的判断，如果你后续会切换其他平台的视频源（比如普通mp4、其他站点视频等），这些源的原生实例没有getPlaybackRate方法，不加判断会抛错。
• 你不需要自己通过event.target找播放器实例，react-player提供的getInternalPlayer()方法已经做了跨平台的适配，YouTube源下返回的就是官方iFrame API的实例对象，可以直接调用getPlaybackRate()、setPlaybackRate()等所有官方实例方法。
• 你自己写的1x、1.5x、2x速率切换按钮逻辑不需要改动，点击按钮时调用playerRef.current.setPlaybackRate(目标速率)后同步更新playbackRate状态即可，和上面的同步逻辑不会冲突。
• 如果追求更低的性能开销，也可以在onReady回调触发、播放器加载完成后，给原生YouTube实例绑定onPlaybackRateChange事件，事件触发时直接更新状态，注意组件卸载时要解绑事件避免内存泄漏。

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