如何使用 React 在没有控件的情况下通过单击开始播放视频？

Question

我在我的 React 应用程序中使用标准视频 html5 播放器：

const Video = ({ url, contentType }) => (
  <video poster={url}>
    <source src={`${url}#t=0.01`} type={contentType} className="video" />
  </video>
)

我想通过单击隐藏控件和 play/pause 视频，我找到了使用 javascript:

的方法

var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
    if (videoPlaying) {
        video.pause();
        videoPlaying = false;
    }
    else {
        video.play();
        videoPlaying = true;
    }
}

但我不知道如何用 React 替换它，我尝试添加 onClick{e => e.play} 但它没有用，我还检查了 e 包含的内容，它不包含任何 isPlaying 标志或 play/pause 可能性，请告诉我如何正确使用它？

Answer 1

有两个原因不起作用：

你没有调用 play，你只是提到了它。要调用它，您需要 ().
传递给事件处理程序的参数不是事件发生的元素，它是一个事件对象（在 React 的情况下，是一个合成对象）。您可以通过事件的 currentTarget 属性:
访问您挂钩事件的元素
```
 <video poster={url} onClick={e => e.currentTarget.play()}>
```
或解构
```
 <video poster={url} onClick={({currentTarget}) => currentTarget.play()}>
```

如何使用 React 在没有控件的情况下通过单击开始播放视频？

How to start playing video by clicking on it without controls using React?

javascript

html5-video

reactjs