Question

我已经在React应用程序中实现了video.js。我已根据官方documentation创建了此视频组件：

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)

根据窗口大小调整video.js的大小

1 个答案: