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

Question

在我的 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 我想知道是否有更多 "reacty" 方法来做到这一点？此外，如果我确实必须像上面那样使用纯 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;

Answer 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()}} width="130" src={playImage}/>
                <p className="thin">Watch our video</p>
              </div>
            </div>
          </div>
        </div>
        <Footer/>
      </div>
    )
  }
};

Answer 2

您还可以在视频元素上执行 onClick={e => e.target.play()} 。希望这有帮助

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

ReactJS: How can I play an html5 video with an onClick event correctly with react?

javascript

html5-video

reactjs