React 函数组件的更新示例：

import React, { useRef} from 'react'

function myComponent(props) {
  const vidRef = useRef(null);
  const handlePlayVideo = () => {
    vidRef.current.play();
  }
  return (
    <video ref={vidRef}>
      <source src={[YOUR_SOURCE]} type="video/mp4" />
    </video>
  )
}

最直接的方法是使用refswhich 是一个 React 功能，它可以让您调用从render().

您可以在文档中阅读更多关于它们的信息：https : //facebook.github.io/react/docs/more-about-refs.html

在这种情况下，只需ref向您的video标签添加一个字符串，如下所示：

<video ref="vidRef" src="some.mp4" type="video/mp4"></video>

这样，当您向按钮添加点击处理程序时：

<button onClick={this.playVideo.bind(this)}>PLAY</button>

该playVideo方法将可以通过refs以下方式访问您的视频参考：

playVideo() {
  this.refs.vidRef.play();
}

这是一个有效的演示，因此您可以查看完整的示例。

接受的答案是使用旧的react风格，如果你想用 ES6

自动播放暂停以及手动控制播放 Polestar 介绍的简单组件：

    import React from "react";
    class Video extends React.Component {
      componentDidMount = () => {
        this.playVideo();
      };

      componentWillUnmount = () => {
          this.pauseVideo();
      };


      playVideo = () => {
        // You can use the play method as normal on your video ref
        this.refs.vidRef.play();
      };

      pauseVideo = () => {
        // Pause as well
        this.refs.vidRef.pause();
      };

      render = () => {
        return (
          <div>
            <video
              ref="vidRef"
              src="https://assets.polestar.com/video/test/polestar-1_09.mp4"
              type="video/mp4"
            />

            <div>
              <button onClick={this.playVideo}>
                Play!
              </button>
              <button onClick={this.pauseVideo}>
                Pause!
              </button>
            </div>
          </div>
        );
      };
    }

 export default Video;

视频来自https://www.polestar.com/cars/polestar-1

这个答案增加了我赞成的@mheavers。

有一些区别：

• 可以noControls作为props传递给Video组件，并且仅当<video>没有默认控件时才应用单击事件（noControls传递时就是这种情况）。
• 的处理程序的功能是一个toggler; 允许根据其当前状态播放或暂停。
• 可以通过类创建播放按钮覆盖样式video__play-button，而相同的处理程序通过类隐藏它is-playing。
• 它还展示了如何使用两个或多个ref并将它们作为参数传递给纯渲染函数。

import React, { useRef } from 'react';
import PropTypes from 'prop-types';

const renderVideo = ({
  noControls,
  src,
  vidButtonRef,
  vidRef,
  handleToggleVideo,
}) => (
  <>
    {noControls ? (
      <div ref={vidButtonRef} className="video video__play-button">
        <video
          ref={vidRef}
          src={src}
          onClick={handleToggleVideo}
        ></video>
      </div>
    ) : (
      <video
        src={src}
        controls
        controlsList="nodownload"
      ></video>
    )}
  </>
);

const Video = props => {
  const vidRef = useRef(null);
  const vidButtonRef = useRef(null);
  const { noControls, src } = props;
  const handlePlay = () => {
    vidRef.current.play();
    // hide overlay play button styles, set by 'video__play-button'
    vidButtonRef.current.classList.add('is-playing');
  };
  const handlePause = () => {
    vidRef.current.pause();
    // show overlay play button styles, set by 'video__play-button'
    vidButtonRef.current.classList.remove('is-playing');
  };
  const handleToggleVideo = () => (vidRef.current.paused ? handlePlay() : handlePause());
  return (
    <>
      {renderVideo({
        noControls,
        src,
        vidButtonRef,
        vidRef,
        handleToggleVideo,
      })}
    </>
  );
};

Video.propTypes = {
  noControls: PropTypes.bool,
  videoUrl: PropTypes.string,
};

export default Video;