如何在没有使用 React 控件的情况下单击它来开始播放视频？答案

【问题标题】：How to start playing video by clicking on it without controls using React?如何在没有使用 React 控件的情况下单击它来开始播放视频？
【发布时间】：2020-09-30 06:25:10
【问题描述】：

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

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

我想通过点击隐藏控件和播放/暂停视频，我找到了如何使用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 可能，请告诉我如何正确地做到这一点？

【问题讨论】：

标签： javascript reactjs html5-video

【解决方案1】：

有两个原因不起作用：

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

【讨论】：