如何在没有控件的情况下单击视频来播放视频，并在单击播放后显示控件？在reactJS中

Question

`导出 const UseRefPlayer = () => { const videoRef = useRef ();

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

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

return (
<>
<div className="videoplayer-buttons">
    <button className="play-button" onClick={handlePlay}>
        Play
    </button>
    <button className="pause-button" onClick={handlePause}>
        Pause
    </button>
</div>
<video width="100%" ref={videoRef} onClick={handlePlay} controls>
    <source src="{videoURL}"/>
</video>
</>
);

}`

我尝试添加一个暂停按钮，但无论如何它都会显示，然后我尝试添加一个

poster={url}

，但控件显示无论如何都会覆盖海报。 我希望控件仅在视频播放后显示。 谢谢

Answer 1

实际上，这里有一个答案，在handlePlayToggle内部，我们使用video.paused检查视频是否暂停。如果暂停，我们就播放；否则，我们暂停。

我们还根据视频的当前状态切换controlsVisible 状态。如果视频暂停，我们会隐藏控件；如果正在播放，我们会显示控件。

import React, { useState, useRef } from "react";

export const UseRefPlayer = () => {
  const videoRef = useRef();
  const [controlsVisible, setControlsVisible] = useState(false);

  const handleVideoClick = () => {
    const video = videoRef.current;

    if (video.paused) {
      video.play();
      setControlsVisible(true);
    } else {
      video.pause();
      setControlsVisible(false);
    }
  };

  return (
    <>
      <video
        width="100%"
        ref={videoRef}
        onClick={handleVideoClick}
        controls={controlsVisible}
        poster={"posterUrl"}
      >
        <source src="videoUrl" />
      </video>
    </>
  );
};