![](/img/trans.png)
[英]ReactJS: How can I play an html5 video with an onClick event correctly with react?
[英]How to play HTML5 video with onClick in reactJS for multiple videos?
在我的反应组件中,我添加了视频标签,如:
<video controls ref="video">
<source src="VIDEO SOURCE" type="video/mp4" />
</video>
我添加了播放按钮,如:
<button onClick={() => {this.refs.video.play()}}>Play Button</button>
使用ref
时,此代码适用于单个视频
但是我在一页中有多个视频所以
如何在循环中使用多个引用?
而不是使用 ref 使用视频的映射功能并将视频 uri 传递给像这样的播放按钮
const [videoURI,setVideoURL] = useState(null)
const _onplayvideo= (video_uri) =>{
setVideoURL(video_uri)
}
....
map((res)=>{
return(
<>
<Video uri={videoURI} />
<Button onClick={()=>{_onplayvideo(res.video_uri)}} />
</>
)
})
我猜它会起作用。 检查那个
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>
</>
)
})
}
</>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.