如何在 reactJS 中使用 onClick 为多个视频播放 HTML5 视频？答案

【问题标题】：How to play HTML5 video with onClick in reactJS for multiple videos?如何在 reactJS 中使用 onClick 为多个视频播放 HTML5 视频？
【发布时间】：2020-01-28 07:49:43
【问题描述】：

在我的反应组件中，我添加了视频标签，例如：

<video controls ref="video">
  <source src="VIDEO SOURCE" type="video/mp4" />
</video>

我添加了播放按钮，例如：

<button onClick={() => {this.refs.video.play()}}>Play Button</button>

此代码在使用ref时适用于单个视频

但是我在一页中有多个视频，所以

如何在循环中使用多个 ref？

【问题讨论】：

所以，基本上你在问如何渲染多视频播放器 - 比如下一个和上一个按钮以及一次多个视频。对吗？
不，我需要为每个视频使用自定义播放按钮进行自定义播放

标签： javascript reactjs html5-video

【解决方案1】：

而不是使用 ref 使用视频的映射功能并将视频 uri 传递给类似这样的 onplay 按钮

const [videoURI,setVideoURL] = useState(null)
const _onplayvideo= (video_uri) =>{
setVideoURL(video_uri)
}
 ....
map((res)=>{
return(
 <>
 <Video uri={videoURI} />
 <Button onClick={()=>{_onplayvideo(res.video_uri)}} />
 </>
)
})

【讨论】：

我需要多个带有自定义播放按钮的视频。

【解决方案2】：

我猜它会起作用。检查一下

 const [AutoPlay, setAutoPlay] = useState({});

 const onClickHandler = id => {
   if (AutoPlay.hasOwnProperty(id)) {
     if (AutoPlay[id] === true) {
      setAutoPlay({...AutoPlay,[id]:false});    
  } else {
    setAutoPlay({...AutoPlay,[id]:true});
  }
} else {
  setAutoPlay({...AutoPlay,[id]:true});
}
}

return(
<>
 {

   Videos &&  Videos.map((result,index)=>{                                                  
     return(
            <>
            <video controls key={index} autoplay={AutoPlay[index]===true}>
            <source 
            src={result.Source} //Whatever The Source is
            type="video/mp4" />
            </video>
           <button onClick={() => onClickHandler(index)}>Play</button>
           </>
          )
          })

 }

</>

 )

【讨论】：

我需要多个带有自定义播放按钮的视频。
@Tamilvanan 编辑了代码...我排除了裁判并使用了 hasOwnProperty() 属性。
感谢您的代码...我已经尝试并收到类似这样的错误“只能在函数组件的主体内调用挂钩。”