Блог

Привет, я пытался создать видеопроигрыватель в react и хотел создать свои собственные элементы управления, но столкнулся с проблемой. функция handlePlay OnClick должна воспроизводить или приостанавливать видео. isPlaying — это состояние для отслеживания команды пользователя (isPlaying инициализируется значением true), но даже когда состояние обновляется, видео не приостанавливается.Кто -нибудь может помочь Thnx

 class Video extends React.Component {
  constructor(...args) {
    super(...args);
    const video = document.createElement("video");
    video.src = Vid;
    video.type = "video/mp4";
 
    this.state = {
      video: video,
      timestamps: [],
      isPlaying: true,
    };

    video.addEventListener("canplay", () => {
      if (this.state.isPlaying === true) {
        console.log("play");
        video.play();
        //this.image.getLayer().batchDraw();
       // this.requestUpdate();
      } else {
        console.log("pause");
        video.pause();
        //this.image.getLayer().batchDraw();
        //this.requestUpdate();
      }
    });
  }

  handlePlay = () => {
 
    if (this.state.isPlaying === true) {
      this.setState({
        isPlaying: false,
      });
    } else {
      this.setState({
        isPlaying: true,
      });
    }
  };
 

Сначала вы должны использовать render метод компонента React для рендеринга вашего видео, а затем подключить правильные обработчики onClick для воспроизведения / приостановки с помощью пользовательского элемента управления. Код будет выглядеть примерно так:

 import React, { Component } from "react";

export default class Video extends Component {
  constructor(props) {
    super(props);
    this.state = {
      timestamps: [],
      isPlaying: true
    };
  }

  videoRef = React.createRef();

  handlePlay = () => {
    if (this.state.isPlaying === true) {
      this.videoRef.current.pause();
      this.setState({
        isPlaying: false
      });
    } else {
      this.videoRef.current.play();
      this.setState({
        isPlaying: true
      });
    }
  };

  render() {
    return (
      <>
        <video
          ref={this.videoRef}
          autoPlay
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        />
        <button type="button" onClick={this.handlePlay}>
          Control
        </button>
      </>
    );
  }
}
 

Я создал фиктивную кнопку для эмуляции вашего элемента управления.
Необходимо videoRef сохранить ссылку на видеоэлемент, которая назначается ему с ref помощью свойства и доступна как videoRef.current . Вы можете узнать больше о ссылках в официальных документах React.

Вы можете найти рабочий пример в следующей изолированной среде кода.