ReactJS:如何使用react正确播放带有onClick事件的html5视频
ReactJS: How can I play an html5 video with an onClick event correctly with react?
在我的react组件中,我有一个视频标签,如下所示:
<video>
<source src="https://fake.com/file.mp4" type="video/mp4" />
</video>
我有一个按钮再往下一点,我想用它来激活视频:
<button onClick={playVideoFunc?}/>
我想我会使用某种点击事件来触发视频播放,我知道我可以使用以下javascript代码来完成:
var v = document.getElementsByTagName("video")[0];
v.play();
但感觉这是我第一次使用react,我想知道是否有更"react"的方法?此外,如果我必须使用像上面这样的纯javascript,那么将代码放入react组件本身是否合适?作为参考,我的组件如下(减去一些细节):
import React, { Component } from 'react';
import Footer from './footerComponent'
import Navbar from './navbarComponent';
class Home extends React.Component{
render() {
return (
<div className="wrapper home-page">
<div className="jumbotron-video-wrapper">
<video>
<source src="https://fake.com/file.mp4" type="video/mp4" />
</video>
</div>
<Navbar type={"transparent"}/>
<div className="jumbotron margin-bottom-20" style={heroStyle}>
<div className="container-fluid">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center">
<h1>WORDS WORDS WORDS</h1>
<img onClick={playvideo??} width="130" src={playImage}/>
<p className="thin">Watch our video</p>
</div>
</div>
</div>
</div>
<Footer/>
</div>
)
}
};
export default Home;
您可以为视频元素分配一个ref,并使用this.refs.video.play()调用play().
class Home extends React.Component{
render() {
return (
<div className="wrapper home-page">
<div className="jumbotron-video-wrapper">
<video ref="video">
<source src="https://fake.com/file.mp4" type="video/mp4" />
</video>
</div>
<Navbar type={"transparent"}/>
<div className="jumbotron margin-bottom-20" style={heroStyle}>
<div className="container-fluid">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center">
<h1>WORDS WORDS WORDS</h1>
<img onClick={() => {this.refs.video.play()}} width="130" src={playImage}/>
<p className="thin">Watch our video</p>
</div>
</div>
</div>
</div>
<Footer/>
</div>
)
}
};
您也可以对视频元素执行onClick={e=>e.target.play()}。希望这对有帮助
您可以使用useRef挂钩来引用视频。然后在onClick功能中,您可以播放视频。你可以这样做。
";视频";在图像中是视频标签的样式化组件。FYI
在此处输入图像描述
相关文章:
- 如何在执行此特定onclick事件时执行JavaScript函数
- 如何调用“;链接_;在onclick事件上使用Javascript
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 选择onclick事件jquery
- 执行php函数的onclick事件的其他替代方案
- 动态创建OnClick事件Javascript
- onClick事件未触发reactjs
- 使用java脚本更改onClick事件中菜单选项卡的颜色
- 如何使用OnClick事件通过参数调用来调用PHP函数
- 使用jQuery动态添加onClick事件
- onclick事件不'不要在萤火虫或铬中点火
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- xPages标签onclick事件不'不要在空白处工作
- 用beautifulsoup-python调用onclick事件
- 使用JavaScript将onclick事件与参数绑定
- 使用onClick事件扩展Aviarc容器小部件
- 在按钮的onclick事件上将字符串传递给JavaScriptFuntion
- 用于显示onclick事件计数的可调整跨度标记
- Javascript onclick事件在第一次单击时未启动
- 如何使用onclick事件触发此代码.我尝试过,但失败了