经过反复测试，由于uniapp开发过程中，层级太多，容器多层嵌套，导致很多地方css样式设计不生效，目前最有效的办法是:在播放器初始化后，用 JS 强制重设样式：

mounted() {
  this.$nextTick(() => {
    const videoEl = document.getElementById('video');
    if (!videoEl) return;

    // 初始化播放器（容器尺寸用100%，跟随#video的100vw/100vh）
    this.videoContext = new Player({
      el: videoEl,
      url: this.m3u8Url,
      playsinline: isWechat ? false : true,
      autoplay: true,
      width: '100%', 
      height: '100%',
      controls: true,
      videoFillMode: 'fill', // 播放器层面的填充模式（辅助作用）
      plugins: [HlsPlugin],
    });

    // 延长延迟到300ms（确保播放器完全渲染并覆盖默认样式）
    setTimeout(() => {
      const videoTag = videoEl.querySelector('video');
      if (!videoTag) return;

      // 1. 强制video标签全屏拉伸
      videoTag.style.width = '100%';
      videoTag.style.height = '100%';
      videoTag.style.objectFit = 'fill';
      videoTag.style.objectPosition = '0 0'; // 确保无偏移

      // 2. 强制video的直接父容器全屏（解决父容器尺寸被限制的问题）
      const videoParent = videoTag.parentNode;
      if (videoParent) {
        videoParent.style.width = '100%';
        videoParent.style.height = '100%';
        videoParent.style.margin = '0';
        videoParent.style.padding = '0';
      }

      // 3. 强制播放器最外层容器（videoEl）保持全屏（防止被动态修改）
      videoEl.style.width = '100vw';
      videoEl.style.height = '100vh';
    }, 300); // 延迟可根据实际加载速度调整（200-500ms）
  });
}