React中Video.js播放器无法随窗口大小调整问题求助

问题描述 #

我已经在React应用中集成了Video.js，按照官方文档编写了VideoPlayer组件代码：

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
  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方法，但该方法无法生效：player引用正常，但修改其height和width属性无法让播放器响应窗口尺寸变化，请问问题出在哪里？

解决方案 #

这个问题的核心是你直接修改了Video.js实例的原始属性，但Video.js的播放器实例需要通过它提供的API方法来修改尺寸，而非直接赋值。另外还有几个关键优化点，我逐一说明：

• 使用Video.js官方API修改尺寸
  Video.js为播放器实例提供了专门的height()、width()方法，或者更便捷的resize()方法来设置尺寸。直接修改player.height或player.width不会触发播放器的重绘与尺寸更新逻辑。修改onResize方法如下：

onResize() {
  if (this.player) {
    // 方式1：分别设置宽高
    this.player.height(window.innerHeight);
    this.player.width(window.innerWidth);
    // 方式2：一次性设置宽高更简洁
    // this.player.resize(window.innerWidth, window.innerHeight);
  }
}

• 复用组件内的播放器引用，避免重复查找
  你在componentDidMount中已经将播放器实例存储在this.player中，完全不需要再通过videojs("videoPlayer")从DOM中查找实例，直接复用this.player既高效又能避免潜在的查找错误。

• 移除Resize事件监听，防止内存泄漏
  你在组件初始化时添加了窗口Resize监听，但在组件卸载时没有移除，这会导致无用的事件监听残留，引发内存泄漏。在componentWillUnmount中补充移除逻辑：

componentWillUnmount() {
  if (this.player) {
    this.player.dispose();
  }
  // 移除Resize监听
  window.removeEventListener("resize", this.onResize);
}

• 确保this指向正确
  如果你的onResize方法中需要访问组件实例的this.player，要确保this指向组件本身。可以通过两种方式实现：
  1. 在constructor中绑定this：

  constructor(props) {
    super(props);
    // 绑定this指向
    this.onResize = this.onResize.bind(this);
    window.addEventListener("resize", this.onResize);
  }
  

  2. 使用箭头函数定义onResize：

  onResize = () => {
    if (this.player) {
      this.player.resize(window.innerWidth, window.innerHeight);
    }
  }
  

完成以上修改后，播放器就能正常响应窗口尺寸变化了。

内容的提问来源于stack exchange，提问作者svprdga