使用 react-youtube，除了事件之外，还有什么方法可以引用播放器？答案

【问题标题】：Using react-youtube, is there any way to reference the player other than with an event?使用 react-youtube，除了事件之外，还有什么方法可以引用播放器？
【发布时间】：2021-12-03 09:01:47
【问题描述】：

react-youtube 库的文档非常稀缺，我尝试引用播放器以在外部值更改时使用 pauseVideo() 和 playVideo() 函数。在官方的 youtube api 文档中，他们将播放器放在 var 中并引用它，但 react-youtube 文档仅说明播放器是作为事件的目标值传递的。那么我应该用什么来引用播放器并在没有事件的情况下使用它的功能呢？

这是一个带有同步视频播放器的聊天室类型应用程序，下面是视频播放器功能的代码。其中包括一个用于放置 URL 的文本字段和一个用于将其提交到房间的按钮。我目前正在成功地向房间广播播放器的新状态，当它发生变化时，我想在发生这种情况时更改房间中每个用户的播放器状态，但要这样做，我需要引用播放器，它我又遇到了麻烦。

import YouTube from "react-youtube";


function SyncPlayer({ code, setPlayerURL, sendCode, onPlayerStateChange, playerState} ) {
  useEffect(() => {
    if(playerState == 1){
      youtubePlayer.playVideo();//not valid reference to player
    }
  }, [playerState])

  const opts = {
    playerVars: {
      autoplay: 0
    }
  };
  
  return (
    <div>
      <div>
        <input id="urlinput" type="text" placeholder="Video URL" onChange={(event) => setPlayerURL(event.target.value)}/>
        <button onClick={(event) => sendCode(event)}>submit</button> 
        <div>
          <YouTube
            videoId={code}
            containerClassName="embed embed-youtube"
            opts={opts} 
            onStateChange={onPlayerStateChange}
          />
        </div>
      </div>

    </div>
  );
}

export default SyncPlayer;

【问题讨论】：

标签： javascript reactjs youtube-api

【解决方案1】：

好吧，看来我想通了。

所以播放器的 onReady 函数将传递的事件存储在一个全局变量中，我使用它来引用播放器。看起来是这样的：

import YouTube from "react-youtube";
var cElement = null;

function SyncPlayer({ code, setPlayerURL, sendCode, onPlayerStateChange, playerState} ) {
  
  useEffect(() => {
    if(cElement){
      var player = cElement.target;
      if(playerState === 1){
        player.playVideo();
      }
      if(playerState === 2){
        player.pauseVideo();
      }
    }
  }, [playerState]);

  const storeEvent = event =>{
    cElement = event;
  };

  const opts = {
    playerVars: {
      autoplay: 0
    }
  };
  

  return (
    <div>
      <div>
        <input id="urlinput" type="text" placeholder="Video URL" onChange={(event) => setPlayerURL(event.target.value)}/>
        <button onClick={(event) => sendCode(event)}>submit</button> 
        <div>
          <YouTube
            videoId={code}
            containerClassName="embed embed-youtube"
            opts={opts} 
            onStateChange={onPlayerStateChange}
            onReady={storeEvent}
          />
        </div>
      </div>

    </div>
  );
}

export default SyncPlayer;

【讨论】：