基于断点验证Pug中Div显示状态及切换视频的技术咨询

当然可以实现根据屏幕宽度（断点）切换不同的视频，这里给你几种简洁且实用的方案，适配你的Pug代码场景：

方案1：利用原生HTML5 video的source媒体查询（推荐） #

这是最轻量化的实现方式，不需要额外CSS或JS，直接借助<source>标签的media属性指定断点条件，浏览器会自动加载匹配当前屏幕尺寸的视频源。

对应的Pug代码：

#Carousel.carousel.slide(data-ride='carousel')
  .carousel-inner
    .carousel-item.active
      video(muted='')
        // 默认加载原视频（屏幕宽度≥760px时）
        source(src="video.mp4", type='video/mp4')
        // 屏幕宽度<760px时加载响应式视频
        source(src="videoresponsive.mp4", type='video/mp4', media="(max-width: 759px)")

原理说明：浏览器会从上到下检查<source>的media条件，匹配到符合当前视口的源就会加载并播放，完美适配你的断点需求。

方案2：CSS媒体查询控制视频容器的显示/隐藏 #

如果需要对视频容器做额外样式控制（比如过渡动画），可以用两个独立的视频元素，通过CSS媒体查询切换它们的显示状态。

Pug代码 #

#Carousel.carousel.slide(data-ride='carousel')
  .carousel-inner
    .carousel-item.active
      // 桌面端视频
      .desktop-video
        video(muted='')
          source(src="video.mp4", type='video/mp4')
      // 移动端视频
      .mobile-video
        video(muted='')
          source(src="videoresponsive.mp4", type='video/mp4')

CSS代码（可嵌入Pug的style标签或外部样式表） #

.mobile-video {
  display: none;
}

@media (max-width: 759px) {
  .desktop-video {
    display: none;
  }
  .mobile-video {
    display: block;
  }
}

方案3：JavaScript动态切换视频源 #

如果需要更复杂的交互逻辑（比如窗口 resize 时实时切换、加载提示等），可以用JS监听视口变化，动态修改video的src属性。

Pug代码 #

#Carousel.carousel.slide(data-ride='carousel')
  .carousel-inner
    .carousel-item.active
      video#responsive-video(muted='')
        source(src="video.mp4", type='video/mp4')

JavaScript代码 #

const video = document.getElementById('responsive-video');
const source = video.querySelector('source');

// 定义切换视频的函数
function switchVideoSource() {
  const isMobile = window.innerWidth < 760;
  source.src = isMobile ? 'videoresponsive.mp4' : 'video.mp4';
  // 重新加载视频
  video.load();
}

// 页面加载时执行一次
switchVideoSource();

// 监听窗口resize事件
window.addEventListener('resize', switchVideoSource);

注意：以上方案都能兼容Bootstrap的Carousel组件，不会影响轮播的正常功能。

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