ReactJS实现：点击无控件视频播放，播放后显示控件

核心解决方案 #

通过状态控制视频原生控件的显示，结合视频播放事件实现需求：

• 用useState管理控件显示状态，初始隐藏控件
• 视频点击事件仅在未播放时触发播放操作
• 监听视频onPlay事件，播放开始后自动显示原生控件

修改后的完整代码 #

import { useRef, useState } from 'react';

export const UseRefPlayer = () => {
  const videoRef = useRef();
  // 控制控件显示的状态，初始为false（隐藏控件）
  const [showControls, setShowControls] = useState(false);
  // 替换为你的视频地址
  const videoURL = "你的视频文件地址";

  const handlePlay = () => {
    videoRef.current.play();
  };

  const handlePause = () => {
    videoRef.current.pause();
  };

  // 视频开始播放时，切换控件显示状态
  const handleVideoPlay = () => {
    setShowControls(true);
  };

  return (
    <>
      {/* 自定义按钮根据控件状态切换显示 */}
      {!showControls && (
        <div className="videoplayer-buttons">
          <button className="play-button" onClick={handlePlay}>
            Play
          </button>
        </div>
      )}
      {showControls && (
        <div className="videoplayer-buttons">
          <button className="pause-button" onClick={handlePause}>
            Pause
          </button>
        </div>
      )}
      <video
        width="100%"
        ref={videoRef}
        {/* 未播放时点击视频触发播放，播放后点击事件交由原生控件处理 */}
        onClick={!showControls ? handlePlay : undefined}
        {/* 根据状态决定是否显示原生控件 */}
        controls={showControls}
        {/* 设置海报图，初始无控件不会覆盖海报 */}
        poster="你的海报图片地址"
        {/* 监听播放事件，显示控件 */}
        onPlay={handleVideoPlay}
      >
        <source src={videoURL} type="video/mp4" />
      </video>
    </>
  );
};

关键细节说明 #

• 控件状态控制：controls={showControls}确保初始不显示原生控件，播放后自动开启
• 海报图不被覆盖：初始状态下控件隐藏，海报图完整展示，播放后控件才会出现在视频区域
• 点击逻辑优化：仅在未播放时（控件隐藏时），点击视频才触发播放，避免和原生控件的点击操作冲突
• 自定义按钮适配：根据播放状态切换显示播放/暂停按钮，也可以直接去掉自定义按钮，完全依赖原生控件的功能

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