如何通过外部按钮控制react-youtube播放器的播放/暂停功能

核心思路是通过useRef保存YouTube播放器实例，调用实例自带的原生方法实现控制，具体修改如下：

• 第一步：声明ref存储播放器实例

import { useRef } from 'react';

// 组件内声明
const playerRef = useRef(null);
const opts = {
  playerVars: {
    disablekb: 1,
    controls: 0,
    autoplay: 1,
    loop: 1,
  },
};

• 第二步：给YouTube组件添加onReady回调，绑定播放器实例到ref
• 第三步：编写切换播放/暂停的事件函数，绑定到外部按钮

修改后的完整组件代码：

// 切换播放暂停的处理函数
const toggleVideoPlay = () => {
  const player = playerRef.current;
  // 避免实例未初始化时报错
  if (!player) return;
  // getPlayerState返回值：1=播放中，2=暂停中
  const currentState = player.getPlayerState();
  if (currentState === 1) {
    player.pauseVideo();
  } else {
    player.playVideo();
  }
}

// 渲染部分
<div>
  <YouTube        
    videoId={vid}
    className="video"
    opts={opts}
    onReady={(e) => {
      // 初始化时保存播放器实例
      playerRef.current = e.target;
    }}
    onPause={(e) => {
      !isHost ? e.target.playVideo() : pausePlayback(e);
    }}
    onPlay={(e) => startPlayback()}
  />
  <button 
    type="button" 
    className="end-call-btn" 
    onClick={toggleVideoPlay}
  >
    切换播放/暂停
  </button>
</div>

react-youtube封装了YouTube官方播放器的全部原生API，拿到实例后还可以直接调用seekTo、setVolume等方法实现更多控制功能。

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