javascript - 如何在reactJS中使用onClick播放多个视频的HTML5视频？

Question

在我的 react 组件中，我添加了视频标签，例如:

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

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

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

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

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

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

Answer 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)}} />
 </>
)
})