Изменить размер видео. js в зависимости от размера окна

Question

Я реализовал видео. js в приложении React. Я создал этот видео компонент, следуя официальной документации :

import React from "react";
import videojs from "video.js";

export default class VideoPlayer extends React.Component {

  constructor(props) {
    super(props);

    window.addEventListener("resize", this.onResize);
  }

  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log("onPlayerReady", this);
    });
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <div data-vjs-player>
          <video
            id="videoPlayer"
            ref={node => (this.videoNode = node)}
            className="video-js"
          ></video>
        </div>
      </div>
    );
  }

  onResize() {
    var player = videojs("videoPlayer");
    if (player) {
      player.height = window.innerHeight;
      player.width = window.innerWidth;
    }
  }
}

Единственное, что я добавил, это прослушиватель для ответа на изменения окна, метод onResize () в конце .

Проблема в том, что этот метод не работает, ссылка на игрока работает нормально, но игрок не реагирует на любые изменения, которые я делаю в этом методе. Что я делаю не так?

Answer 1

height и width - это методы, а не свойства. player.height(n)