如何解决如何通过使用React在没有控件的情况下单击以开始播放视频?
我在我的react应用中使用了标准视频html5播放器:
const Video = ({ url,contentType }) => (
<video poster={url}>
<source src={`${url}#t=0.01`} type={contentType} className="video" />
</video>
)
我想通过单击隐藏控件并播放/暂停视频,我发现了如何使用javascript
来做到这一点:
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
video.pause();
videoPlaying = false;
}
else {
video.play();
videoPlaying = true;
}
}
但是我不知道如何用react替换它,我尝试添加onClick{e => e.play}
,但是它不起作用,我也检查了e
包含的内容,它不包含任何{ {1}}标志或isPlaying
的可能性,请告诉我如何正确执行?
解决方法
有两个原因不起作用:
-
您没有呼叫
play
,只是提到了它。要调用它,您需要()
。 -
传递给事件处理程序的参数不是事件发生的元素,而是事件对象(在React的情况下,是合成对象)。您可以通过事件的
currentTarget
属性来访问挂钩事件的元素:<video poster={url} onClick={e => e.currentTarget.play()}>
或具有破坏性
<video poster={url} onClick={({currentTarget}) => currentTarget.play()}>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。