如何在屏幕方向切换时修改video.js播放器的宽度？

我来帮你排查下这个问题，看了你的代码，发现几个关键问题导致后续视频横屏时宽度设置异常：

1. 只绑定了第一个播放器 #

你的JavaScript代码里只获取了id="cdnvideo"的第一个视频播放器，但id在HTML里是唯一标识，后续视频肯定不能复用这个id，所以横竖屏切换时只有第一个播放器会被调整宽度，其他视频完全没被处理。

2. 变量未定义+横竖屏逻辑错误 #

你在orientationchange回调里用了height和width变量，但这两个变量根本没定义；而且横屏判断时的宽度赋值逻辑是反的——横屏时应该用当前视口的尺寸（或按你的需求设置），你写的vidPlayer.width(height)完全没有依据。另外，screen.width在部分设备横竖屏切换后不会即时更新，更可靠的是用window.innerWidth和window.innerHeight来获取当前视口尺寸。

3. HTML id重复问题 #

如果你的多个视频都用了id="cdnvideo"，这违反了HTML规范，浏览器只会识别第一个拥有该id的元素，后续视频无法通过getElementById获取到。

修正后的代码示例 #

第一步：修改HTML，给每个视频分配唯一id

假设你是用模板引擎循环渲染视频，给每个视频设置唯一的id，同时保留统一的class：

{% for video in videos %}
<video id="cdnvideo-{{forloop.counter}}" class="video-js fullscreen vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="{{video|videourlfilter}}" >
  <source src="{{video|videourlfilter}}" type='video/mp4'>
  <source src="{{video|videourlfilter}}.mp4" type='video/mp4'>
</video>
{% endfor %}

第二步：修改JavaScript，批量处理所有播放器

我们会初始化所有video.js播放器，同时监听横竖屏切换和窗口resize事件，确保所有视频的宽度都能正确更新：

// 存储所有播放器实例，方便后续批量操作
let allVidPlayers = [];

// 初始化页面上所有的video.js播放器
document.querySelectorAll('.video-js').forEach(videoElement => {
  const player = videojs(videoElement);
  // 初始设置宽度为当前视口宽度
  player.width(window.innerWidth);
  allVidPlayers.push(player);
});

// 统一处理尺寸调整的函数
function updatePlayerWidths() {
  // 判断当前是否为横屏模式
  const isLandscape = window.innerWidth > window.innerHeight;
  // 给每个播放器设置宽度
  allVidPlayers.forEach(player => {
    // 如果你希望播放器始终占满视口宽度，直接用window.innerWidth即可
    player.width(window.innerWidth);
    // 如果你有特殊需求（比如横屏时用视口高度），可以改成下面这行：
    // player.width(isLandscape ? window.innerHeight : window.innerWidth);
  });
}

// 绑定横竖屏切换事件
window.addEventListener('orientationchange', updatePlayerWidths);
// 额外监听窗口resize事件，适配桌面浏览器窗口调整或移动端窗口变化
window.addEventListener('resize', updatePlayerWidths);

额外说明 #

• 确保每个视频的id唯一，这是HTML的基础规范，也是JS能正确获取元素的前提。
• 使用window.innerWidth而非screen.width，因为前者是浏览器当前可用的视口宽度，更适合页面元素的尺寸适配；后者是设备的物理屏幕宽度，不会随窗口变化而改变。
• 加上resize事件监听，能覆盖更多场景（比如桌面浏览器调整窗口、移动端弹出键盘导致视口变化等）。

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