如何隐藏React-player中播放按钮旁的控件并实现点击播放后显示控件？

我来帮你搞定这个问题！你想要的效果是初始只显示播放按钮，点击播放后再展示进度条、音量这些控件对吧？咱们先纠正你代码里的一个小错误——你写了classNameName，这是拼写失误，得改成className，不然你的样式根本不会生效哦～

下面给你两种可行的实现方案：

这个方案利用ReactPlayer自带的控件，通过状态切换+CSS隐藏/显示非播放按钮的控件，代码改动最小：

import { useState } from 'react';
import ReactPlayer from 'react-player';

function VideoPlayer() {
  // 用状态记录视频是否在播放
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <div className={`player-wrapper ${isPlaying ? 'show-full-controls' : ''}`}>
      <ReactPlayer
        className="btn-modal object-cover"
        url="Assets/video/stephanie.mp4"
        type="video/mp4"
        controls // 始终开启控件，靠CSS控制显示范围
        width="270px"
        // 监听播放、暂停、结束事件，更新状态
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
        onEnded={() => setIsPlaying(false)}
      />
    </div>
  );
}

然后添加对应的CSS样式：

/* 初始状态：隐藏除播放按钮外的所有控件 */
.player-wrapper:not(.show-full-controls) .react-player__controls > *:not(.react-player__play-button) {
  display: none !important;
}

/* 可选：让初始播放按钮居中显示，更美观 */
.player-wrapper:not(.show-full-controls) .react-player__play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
}

逻辑很简单：初始状态下，通过CSS隐藏播放按钮之外的所有控件；当视频开始播放时，更新状态，触发CSS类名切换，显示完整控件；暂停或播放结束后，再回到初始状态。

如果你想要完全掌控控件的样式和功能，可以自己实现播放按钮和控件，关闭ReactPlayer自带的控件：

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

function CustomVideoPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);
  const playerRef = useRef(null); // 用来获取播放器实例

  // 自定义播放逻辑
  const handlePlay = () => {
    setIsPlaying(true);
    playerRef.current.play();
  };

  // 自定义暂停逻辑
  const handlePause = () => {
    setIsPlaying(false);
    playerRef.current.pause();
  };

  return (
    <div className="btn-modal object-cover" style={{ position: 'relative', width: '270px' }}>
      <ReactPlayer
        ref={playerRef}
        url="Assets/video/stephanie.mp4"
        type="video/mp4"
        controls={false} // 关闭自带控件
        width="100%"
        height="100%"
        onEnded={() => setIsPlaying(false)} // 播放结束后重置状态
      />

      {/* 初始显示的自定义播放按钮 */}
      {!isPlaying && (
        <button 
          onClick={handlePlay}
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            background: 'rgba(0,0,0,0.7)',
            border: 'none',
            color: 'white',
            fontSize: '24px',
            width: '60px',
            height: '60px',
            borderRadius: '50%',
            cursor: 'pointer'
          }}
        >
          ▶️
        </button>
      )}

      {/* 播放时显示的自定义控件栏 */}
      {isPlaying && (
        <div style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          background: 'rgba(0,0,0,0.6)',
          padding: '10px',
          display: 'flex',
          gap: '15px',
          alignItems: 'center'
        }}>
          <button onClick={handlePause} style={{ color: 'white', background: 'transparent', border: 'none', cursor: 'pointer' }}>⏸️</button>
          {/* 这里可以添加进度条、音量控制、全屏按钮等，需要自己实现或引入第三方组件 */}
        </div>
      )}
    </div>
  );
}

这个方案的好处是你可以完全按照自己的需求设计控件样式，缺点是需要自己实现进度条、音量控制这些功能，适合需要高度定制的场景。

选择建议 #

• 如果你只需要快速实现“播放后显示控件”的需求，方案一足够简单高效；
• 如果你想彻底自定义控件的外观和交互，就选方案二。

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