含video元素时flex属性异常及菜单显示问题求助

我刚看完你的代码和遇到的问题，咱们一步步来搞定这些麻烦：

问题根源拆解 #

1. 菜单显示异常/布局坍塌：你给#mid初始设了display:none，浏览器第一次渲染时不会计算它的布局，当你通过JS把它改成block后，flex布局的高度计算直接出问题；另外#mid没设置定位，移除video元素后，body高度没撑满，导致div只缩在屏幕顶部。
2. 透明菜单与视频后台播放：原来的菜单和子元素用了实色背景，完全挡住了视频，而且也没确保菜单的层级能正确覆盖在视频上方。

分步解决方案 #

1. 修复全屏布局，确保菜单显示正常

给#mid添加固定定位，让它不管有没有video都能占满整个视口：

#mid {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: stretch;
  flex-flow: row nowrap;
  background: transparent; /* 直接设为透明 */
  z-index: 2;
}

同时删掉原来的height:100vmin，改用width:100%;height:100%配合定位来撑满屏幕。

2. 实现半透明菜单效果

把左右分栏的背景改成半透明的rgba值，既能看清文本，又能透出后台的视频：

#mid1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 0, 0, 0.3); /* 红色半透明，最后一位是透明度 */
  text-align: center;
}
#mid2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 255, 0.3); /* 蓝色半透明 */
  text-align: center;
}

3. 优化按键逻辑，支持菜单切换

原来的代码只能显示一次菜单，咱们改成按M键切换显示/隐藏，体验更顺手：

function changeChannel(e) {
  console.log('received keyEvent : ' + e.keyCode);
  const midMenu = document.getElementById('mid');
  if(e.keyCode === 77) {
    // 切换display属性，实现显示/隐藏的切换
    midMenu.style.display = midMenu.style.display === 'flex' ? 'none' : 'flex';
  }
}
document.addEventListener('keydown', changeChannel);

4. 确保视频后台播放

恢复video标签的引用，保持它的z-index:1低于菜单的z-index:2，这样菜单显示时视频能在后台正常播放：

<video id='vid' src='textMotion.mp4' autoplay loop></video>

修改后的完整代码 #

HTML代码

<!DOCTYPE html>
<html>
<head>
  <title>VOD</title>
  <script src='js/index.js'></script>
  <style>
    html, body {
      height:100%;
      margin: 0; /* 去掉默认边距，避免出现滚动条 */
      padding: 0;
    }
    #vid {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 1;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
    }
    #mid {
      display: none; /* 初始状态隐藏菜单 */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      justify-content: stretch;
      flex-flow: row nowrap;
      background: transparent;
      z-index: 2;
    }
    #mid1, #mid2 {
      flex: 1;
    }
    #mid1 {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(255, 0, 0, 0.3);
      text-align: center;
    }
    #mid2 {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 255, 0.3);
      text-align: center;
    }
  </style>
</head>
<body>
  <video id='vid' src='textMotion.mp4' autoplay loop></video>
  <div id='mid'>
    <div id='mid1'>
      <h2>text1</h2>
    </div>
    <div id='mid2'>
      <h2>text2</h2>
    </div>
  </div>
</body>
</html>

JavaScript代码

function changeChannel(e) {
  console.log('received keyEvent : ' + e.keyCode);
  const midMenu = document.getElementById('mid');
  if(e.keyCode === 77) {
    midMenu.style.display = midMenu.style.display === 'flex' ? 'none' : 'flex';
  }
}
document.addEventListener('keydown', changeChannel);

测试说明 #

• 确保你的视频文件textMotion.mp4路径正确（和html同级或者调整src的路径）。
• 打开页面后视频会自动播放，按下M键，半透明的分栏菜单会切换显示/隐藏，左半部分居中显示文本，右半部分你可以后续通过JS动态生成列表内容，视频始终在后台播放不会被遮挡。

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