MuxPlayer全屏模式下带UserId的动态覆盖层消失问题

问题本质：当MuxPlayer触发全屏模式时，浏览器会将播放器元素单独挂载到专属的全屏容器中，原父容器内的覆盖层不在这个全屏上下文里，因此会被隐藏，和z-index高低无关。

以下是两种可行的解决方法：

方法一：监听全屏状态，动态移动覆盖层DOM #

通过监听全屏切换事件，将覆盖层在普通布局和全屏容器之间来回移动，确保它始终处于播放器的上下文内：

import { useRef, useEffect } from 'react';

// 组件内部代码
const overlayRef = useRef(null);
const playerRef = useRef(null);

useEffect(() => {
  const syncOverlayToFullscreen = () => {
    const fullscreenEl = document.fullscreenElement;
    if (!overlayRef.current || !playerRef.current) return;

    if (fullscreenEl === playerRef.current) {
      // 进入全屏：把覆盖层移到全屏播放器内部
      fullscreenEl.appendChild(overlayRef.current);
      // 强制设置全屏下的覆盖层样式，避免布局异常
      Object.assign(overlayRef.current.style, {
        position: 'absolute',
        top: '0',
        left: '0',
        width: '100%',
        height: '100%',
        zIndex: '40'
      });
    } else {
      // 退出全屏：把覆盖层移回原父容器
      const originalParent = playerRef.current.parentElement;
      originalParent?.insertBefore(overlayRef.current, playerRef.current);
    }
  };

  // 监听全屏状态变化
  document.addEventListener('fullscreenchange', syncOverlayToFullscreen);

  // 组件卸载时清理监听
  return () => {
    document.removeEventListener('fullscreenchange', syncOverlayToFullscreen);
  };
}, []);

return (
  <>
    <div className="relative overflow-hidden">
      <div 
        ref={overlayRef}
        className="absolute inset-0 bg-black text-white bg-opacity-20 flex justify-center items-center z-40"
      >
        {userId}
      </div>
      <MuxPlayer
        ref={playerRef}
        title={title}
        playbackId={playbackId}
        className={cn(!isReady && "hidden")}
        onCanPlay={() => setIsReady(true)}
        theme="minimal"
        onEnded={onEnd}
        preload="auto"
        defaultShowRemainingTime
      />
    </div>
  </>
);

方法二：利用MuxPlayer的内部插槽（如果支持） #

部分视频播放器组件支持通过插槽插入自定义覆盖层元素，这类元素会被自动包含在全屏上下文里。如果MuxPlayer支持此特性，可以直接将覆盖层作为子元素传入：

<>
  <div className="relative overflow-hidden">
    <MuxPlayer
      title={title}
      playbackId={playbackId}
      className={cn(!isReady && "hidden")}
      onCanPlay={() => setIsReady(true)}
      theme="minimal"
      onEnded={onEnd}
      preload="auto"
      defaultShowRemainingTime
    >
      {/* 覆盖层直接作为MuxPlayer的子元素 */}
      <div className="absolute inset-0 bg-black text-white bg-opacity-20 flex justify-center items-center z-40">
        {userId}
      </div>
    </MuxPlayer>
  </div>
</>

注意：此方法依赖MuxPlayer的API支持，若组件不允许插入自定义子元素，建议使用方法一。

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