如何在没有外部库的情况下在 React 中播放 <video></video>？

Question

我的网页中有一个视频标签和一个“播放/暂停”按钮，当用户点击它时，视频应该开始/停止播放。不幸的是，这个解决方案不起作用 (how to play/pause video in React without external library?)。是否有可能与 react-slick carousel(https://react-slick.neostack.com/) 发生冲突？

这是我的代码：

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

class VideoCarousel extends Component {

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

    componentRender(data) {
        const settings = {
            dots: true,
            ...
        };

        return (
          <div id="video-carousel">
            <div>
               <Slider {...settings}>
                  {data.map((item, index) => (
                      <div key={index}>
                         <div className="video">
                            <div className="w-100 h-100">
                               <video className="video-carousel-card-video" ref="vidRef">
                                  <source src={item.video_file} type="video/mp4" />
                               </video>
                               <button className="card-video-button" onClick={this.playVideo.bind(this)}>
                               </button>
                            </div>
                          </div>
                        </div>
                   ))}
               </Slider>
             </div>
          </div >
        )
    }
}

export default VideoCarousel;

Answer 1

问题在于 ref="vidRef"。由于它嵌套在 forEach() 函数中，因此它创建了对不同元素的多个引用，因此 play() 函数没有特定的引用。

Answer 2

我注意到了几件事：

您应该为 this example from the docs 之类的类定义引用，因为使用 this.refs 已被弃用：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

然后你可以像这样定义你的播放函数：

playVideo() {
        this.myRef.current.play();
    }

其次，您缺少render 函数，它是所有类组件所必需的。

最后，data 来自哪里？我没有看到它在任何地方定义，并且您没有通过 state 或 props 访问它。

Working example.