在React中修改Video.js播放器宽高的方法及window.VIDEOJS_NO_DYNAMIC_STYLE属性的正确配置

嘿，我来帮你搞定这个Video.js播放器高度调整的问题！你遇到的Tailwind样式不生效的情况，确实是因为Video.js自带的动态CSS样式在“抢控制权”，按照文档提示设置window.VIDEOJS_NO_DYNAMIC_STYLE是正确的方向，下面我给你一步步讲清楚怎么配置和调整：

1. 正确设置全局变量（关键！） #

这个全局变量必须在Video.js加载初始化之前设置，否则不会生效。结合你用的Next.js项目，最稳妥的方式是在_app.tsx/_app.jsx文件的最顶部添加配置：

// _app.tsx 最顶部，在任何import之前
window.VIDEOJS_NO_DYNAMIC_STYLE = true;

import type { AppProps } from 'next/app';
// 其他import...

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

如果是普通React项目（非Next.js），可以在index.html里先添加脚本设置变量，再引入Video.js：

<script>
  window.VIDEOJS_NO_DYNAMIC_STYLE = true;
</script>
<!-- 然后引入Video.js的脚本 -->
<script src="path/to/video.js"></script>

2. 给播放器容器设置自定义尺寸 #

禁用Video.js的动态样式后，播放器默认没有宽高，这时候你就可以用Tailwind或者自定义CSS完全控制它的尺寸了。修改你的VideoPlayer组件返回部分，给外层容器加上样式：

return (
  <div data-vjs-player className="h-4/5 w-full"> {/* 这里用你需要的Tailwind类，比如h-[600px]、h-[80vh]都可以 */}
    <div ref={videoRef} className="w-full h-full" /> {/* 让内部容器继承外层尺寸 */}
  </div>
);

如果你更喜欢用自定义CSS，也可以给容器加类名后写样式：

.video-player-container {
  height: 80vh;
  width: 100%;
}
.video-player-inner {
  width: 100%;
  height: 100%;
}

然后对应修改组件的className：

return (
  <div data-vjs-player className="video-player-container">
    <div ref={videoRef} className="video-player-inner" />
  </div>
);

3. 额外小提示 #

• 如果你之前给Video.js的playerOptions设置了fluid: true，在禁用动态样式后这个配置就失效了，所以可以根据需要去掉或者保留（保留的话也不会影响你自定义的尺寸）。
• 检查浏览器开发者工具的Elements面板，确认Video.js没有再生成动态的宽高样式，同时你的自定义样式已经应用到容器上，这样就说明配置生效了。

这样操作之后，你就能轻松控制播放器的高度啦！

备注：内容来源于stack exchange，提问作者Soumalya Bhattacharya