如何使用 React Ref 调用 video.play()？

Question

如何使用 ref 来触发 video.play() ？

目前我收到一个错误：preview.bundle.js:261916 Uncaught TypeError: _this2.videoRef.play is not a function

这是我的组件：

import React from 'react';
import styled from 'styled-components';
import Waypoint from 'react-waypoint';

const Container = styled.div`
  position: relative;
  padding-top: 64px;
`;

const StyledVideo = styled.video`
  width: 500px;
`;


class Video extends React.Component {
  handleRef = (video) => {
    this.videoRef = video;
  };

  render() {
    return (
      <Container>
        <Waypoint
          onEnter={() => {
            console.log(this.videoRef.props.children);
            this.videoRef.play();
          }}
        />
        <StyledVideo
          ref={this.handleRef}
          muted
          playsinline
          poster="https://luna1.co/88dbde.png"
          loop
          src="https://d1gwm4cf8hecp4.cloudfront.net/videos/homepage/v4/Boards.mp4"
        >
          <track kind="captions" />
        </StyledVideo>

      </Container>
    );
  }
}

export default Video;

谢谢

Answer 1

从 <Waypoint /> 组件的 onEnter 回调中删除 console.log(this.videoRef.props.children);，您应该会发现视频按预期播放。

有关工作示例，请参阅此 https://codesandbox.io/s/nwqwopj1p0 link。

如何使用 React Ref 调用 video.play()？

How to use a React Ref to call video.play()?

html

javascript

html5-video

reactjs