ReactJS：如何通过反应正确播放带有 onClick 事件的 html5 视频？

Posted 2023-05-07

【中文标题】ReactJS：如何通过反应正确播放带有 onClick 事件的 html5 视频？

【英文标题】：ReactJS: How can I play an html5 video with an onClick event correctly with react?

【发布时间】：2016-08-30 09:44:17

【问题描述】：

在我的反应组件中，我有一个像这样的视频标签：

  <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 我想知道是否有更“反应”的方式来做这件事？此外，如果我必须使用上面的纯 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??  src=playImage/>
                <p className="thin">Watch our video</p>
              </div>
            </div>
          </div>
        </div>
        <Footer/>
      </div>
    )
  
;

export default Home;

【参考方案1】：

您可以将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()  src=playImage/>
                <p className="thin">Watch our video</p>
              </div>
            </div>
          </div>
        </div>
        <Footer/>
      </div>
    )
  
;

【讨论】：

这可行，但与我可以做到的其他方式没有什么不同。但我想这就是 react 的使用方式？

是的，至少对于触发事件之类的小事情。否则你应该创建一个组件。

【参考方案2】：

您也可以对视频元素执行 onClick=e => e.target.play()。 希望这会有所帮助