React JS中点击播放按钮时如何打开全屏YouTube播放器

你可以通过react-youtube库的实例方法和配置来实现这个需求，以下是修改后的代码和说明：

修改后的代码 #

import React, { useState, useEffect, useRef } from "react";
import { GetVideo } from "../../api";
import Youtube from "react-youtube";

const Media = ({ id, isMovie }) => {
  const [video, setVideo] = useState(null);
  const playerRef = useRef(null);

  useEffect(() => {
    const getVideoData = async () => {
      const response = await GetVideo(isMovie, id);
      const trailer = response.data.results.find(
        (video) => video.name === "Official Trailer"
      );
      setVideo(trailer);
    };
    getVideoData();
  }, [isMovie, id]);

  // 播放器就绪时保存实例
  const onPlayerReady = (event) => {
    playerRef.current = event.target;
  };

  // 点击按钮触发全屏播放
  const handleFullscreenPlay = () => {
    if (playerRef.current) {
      playerRef.current.playVideo();
      playerRef.current.requestFullscreen();
    }
  };

  // 播放器基础配置
  const playerOpts = {
    height: "390",
    width: "640",
    playerVars: {
      fs: 1, // 启用播放器自带的全屏按钮
      autoplay: 0,
    },
  };

  return (
    <div>
      {video ? (
        <>
          <button onClick={handleFullscreenPlay}>全屏播放预告片</button>
          <Youtube
            videoId={video.key}
            opts={playerOpts}
            onReady={onPlayerReady}
          />
        </>
      ) : (
        <div>加载中...</div>
      )}
    </div>
  );
};

export default Media;

关键说明 #

1. 修正初始状态：把useState的初始值从[]改为null，因为trailer是单个对象而非数组，避免后续取video.key时出错。
2. 保存播放器实例：通过useRef创建playerRef，在onPlayerReady事件中保存YouTube播放器实例，方便后续调用全屏方法。
3. 触发全屏逻辑：自定义按钮绑定handleFullscreenPlay函数，先调用playVideo()开始播放，再调用requestFullscreen()请求全屏（浏览器要求全屏操作必须由用户交互触发，按钮点击属于合规的用户交互）。
4. 播放器配置：在playerVars中设置fs:1，确保播放器自带的全屏按钮正常显示，同时支持自定义按钮触发全屏。

如果想实现播放时自动全屏，可以添加onPlay事件监听，但部分浏览器可能会拦截非直接用户交互的全屏请求，所以自定义按钮触发是更稳妥的方案。

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