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

标签 javascript reactjs html5-video

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

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

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

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

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

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

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

最佳答案

不要使用 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)}} />
 </>
)
})

关于javascript - 如何在reactJS中使用onClick播放多个视频的HTML5视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59944235/

相关文章:

javascript - 视频 'timeupdate' 监听器忘记值

c# - 使用 Jquery 将 SelectListItems 的 JSON 列表映射到 DropDown 选择列表并指示所选项目

javascript - 无法将 jsp 值传递给 javascript

javascript - 使用 Node.js 中的 TLS/SSL 隐式加密连接到 FTP 服务器

reactjs - 如何根据另一个表单字段动态显示隐藏 Formik 表单字段

python - 无法使用 Flask 播放 HTML5 视频

javascript - 更改 AnythingSlider 的尺寸

javascript - 怪癖模式和文档类型

reactjs - 简单 - React 和 OData

ffmpeg - wowza 服务器上的 mpeg dash 不工作,状态错误 404 Not Found