如何在React中使用video.js 8.22版本限制视频的最大高度？

在React项目中使用video.js 8.22版本时，可以通过CSS结合播放器容器的样式控制来限制视频的最大高度，防止视频在宽屏或全屏切换时超出预期布局。下面介绍具体的实现方式。

安装与基础引入

首先确保项目中已安装video.js 8.22版本，可以使用包管理器进行安装：

npm install video.js@8.22.0

创建React组件并限制最大高度

在React函数中，利用useRef创建视频容器引用，并在useEffect中初始化播放器。同时通过CSS设置容器与内部视频标签的max-height。

组件代码示例

import React, { useRef, useEffect } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import './VideoPlayer.css';

export default function VideoPlayer() {
  const videoNode = useRef(null);
  const player = useRef(null);

  useEffect(() => {
    if (!player.current) {
      // 初始化video.js 8.22播放器
      player.current = videojs(videoNode.current, {
        controls: true,
        preload: 'auto',
        sources: [{
          src: 'https://ipipp.com/sample.mp4',
          type: 'video/mp4'
        }]
      });
    }
    return () => {
      if (player.current) {
        player.current.dispose();
        player.current = null;
      }
    };
  }, []);

  return (
    <div className="video-container">
      <video ref={videoNode} className="video-js vjs-big-play-centered" />
    </div>
  );
}

样式文件控制最大高度

新建VideoPlayer.css，通过类名限定外层容器与video标签的最大高度，保证视频不会超过设定值：

.video-container {
  max-height: 480px;
  width: 100%;
  overflow: hidden;
}

.video-container .video-js {
  max-height: 480px;
  width: 100%;
  height: auto;
}

.video-container video {
  max-height: 480px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

注意事项

• video.js生成的内部DOM结构会使用video-js类名，直接对video标签写max-height可能被内部样式覆盖，因此建议同时约束容器与播放器根节点。
• 如果使用object-fit: contain，视频会保持比例且不超过最大高度，两侧可能出现黑边。
• 动态修改最大高度时，可通过state改变className或行内样式，并调用player.current.ready()后调整。

小结

在React中使用video.js 8.22限制视频最大高度，核心思路是用CSS的max-height约束播放器容器及内部元素，再配合React的ref完成播放器生命周期管理。这种方法简单稳定，不需要修改video.js源码。

Reactvideo.jsmax_height修改时间：2026-07-27 12:51:41