Question

我的网页上有一个视频标签，还有一个“播放/暂停”按钮，当用户单击它时，该视频应该开始/停止播放。不幸的是，该解决方案不起作用（how to play/pause video in React without external library?）。是否有可能与光滑圆盘传送带（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.refs，因此应为this example from the docs之类的类定义引用：

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来自哪里？我在任何地方都看不到它的定义，您也不会通过状态或道具来访问它。

Working example。

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

2 个答案: