如何实现背景图组件仅在对应div内有视频渲染时才显示

以下分不同开发场景给出可直接复用的方案：

原生HTML/JS场景 #

该方案适合无框架的纯前端开发场景，不需要修改原有组件的插入逻辑：

• 先给两个关联元素加唯一标识，同时给背景组件加默认隐藏的样式：
  给视频容器加属性id="videoContainer"，背景组件加属性id="bgComponent"
  对应CSS样式：

  #bgComponent {
    display: none;
    /* 原有背景组件的样式全部保留 */
  }
  #bgComponent.active {
    display: block;
  }
  

• 用MutationObserver API监听视频容器的DOM变化，自动触发背景显隐判断，性能远高于定时轮询：

  const videoContainer = document.querySelector('#videoContainer')
  const bgComponent = document.querySelector('#bgComponent')
  
  // 检查容器内是否存在video元素
  const checkVideoExist = () => {
    const hasVideo = !!videoContainer.querySelector('video')
    bgComponent.classList.toggle('active', hasVideo)
  }
  
  // 页面初始化先检查一次状态
  checkVideoExist()
  
  // 监听容器内所有子元素的变动，自动同步状态
  const observer = new MutationObserver(checkVideoExist)
  observer.observe(videoContainer, { childList: true, subtree: true })
  

如果需要实现视频播放时才显示背景，暂停/加载时隐藏的效果，只需要修改判断逻辑即可：

const checkVideoPlaying = () => {
  const hasPlayingVideo = Array.from(videoContainer.querySelectorAll('video')).some(video => !video.paused)
  bgComponent.classList.toggle('active', hasPlayingVideo)
}

前端框架场景（Vue/React） #

如果是在框架环境下开发，优先用框架的响应式能力实现，更简单易维护：

Vue 2/3 #

直接将背景组件的显隐和视频的渲染状态绑定到同一个响应式变量即可：

<template>
  <!-- 背景组件 -->
  <BgComponent v-show="showVideo" />
  <!-- 视频容器 -->
  <div class="video-container">
    <video v-if="showVideo" src="你的视频地址" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 控制视频显隐的响应式变量，任何修改该变量的逻辑都会自动同步背景状态
const showVideo = ref(false)
</script>

React #

和Vue逻辑一致，用state关联两个组件的显隐状态：

import { useState } from 'react'

function Page() {
  const [showVideo, setShowVideo] = useState(false)
  return (
    <>
      {/* 背景组件 */}
      {showVideo && <BgComponent />}
      {/* 视频容器 */}
      <div className="video-container">
        {showVideo && <video src="你的视频地址" />}
      </div>
    </>
  )
}

如果视频是第三方组件动态插入不受当前代码控制，可以在useEffect（React）或者onMounted（Vue）中接入上述原生方案的MutationObserver逻辑实现监听。

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