Как воспроизвести HTML5 видео с помощью onClick в reactJS для нескольких видео?

Question

В своем компоненте реакции я добавил видео тег, например:

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

И добавил кнопку воспроизведения, например:

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

Этот код работает для одного видео при использовании ref

Но у меня есть несколько видео на одной странице, так что

Как использовать несколько ссылок в l oop?

Answer 1

вместо использования 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)}} />
 </>
)
})

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

 }

</>

 )