Как играть <video></video> в React без внешней библиотеки?

Question

У меня есть видео-тег на моей веб-странице и кнопка «воспроизведение / пауза», которая, когда пользователь нажимает на нее, должна начинать / останавливать воспроизведение видео. К сожалению, это решение не работает ( как воспроизвести / приостановить видео в React без внешней библиотеки? ). Есть ли вероятность того, что возникнет конфликт с каруселью с реагирующим движением (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 устарело:

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 откуда? Я не вижу его нигде, и вы не можете получить к нему доступ через состояние или реквизит.

Рабочий пример .