根据桌面/移动设备加载不同适配视频的技术求助

先分析你之前尝试的问题 #

第一种尝试的问题 #

• JavaScript代码写在了<style>标签里，这是错误的，JS必须放在<script>标签中
• 字符串拼接时引号嵌套错误，导致语法报错，浏览器无法执行代码
• 没有处理窗口大小变化的情况（比如用户拖拽窗口改变尺寸）

第二种尝试的问题 #

• media属性的分界值重叠（1080px同时满足两个条件），浏览器会优先加载第一个匹配的source
• 部分浏览器对<source>的media属性支持有限，可能无法正确切换

方案1：纯HTML+CSS实现（无需JS） #

这种方法利用CSS媒体查询控制两个视频的显示/隐藏，适配你熟悉CSS的情况：

<style>
/* 基础视频样式，确保铺满容器且不变形 */
.video-container video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

/* 桌面端：显示桌面视频，隐藏移动端视频 */
@media only screen and (min-width: 980px) {
  .mobile-video {
    display: none;
  }
}

/* 移动端：显示移动端视频，隐藏桌面端视频 */
@media only screen and (max-width: 979px) {
  .desktop-video {
    display: none;
  }
}
</style>

<body>
  <div class="video-container">
    <!-- 桌面端视频 -->
    <video autoplay muted loop class="desktop-video">
      <source src="https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4" type="video/mp4">
    </video>
    <!-- 移动端视频 -->
    <video autoplay muted loop class="mobile-video">
      <source src="https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4" type="video/mp4">
    </video>
  </div>
</body>

说明：

• object-fit: cover确保视频按比例填充容器，不会拉伸变形
• 媒体查询用980px作为分界（可按需调整），避免条件重叠
• 保留autoplay muted loop属性，符合现代浏览器自动播放规则

方案2：JavaScript实现（简单易懂，带注释） #

如果你想用JS动态切换视频，以下是修正后的代码：

<style>
#LoadVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}
</style>

<body>
  <video id="LoadVideo" autoplay muted loop></video>

  <script>
    // 获取页面中的视频元素
    const mainVideo = document.getElementById('LoadVideo');
    // 定义两个设备对应的视频地址
    const mobileSrc = "https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4";
    const desktopSrc = "https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4";

    // 定义切换视频的核心函数
    function switchVideo() {
      // 获取当前窗口宽度
      const windowWidth = window.innerWidth;
      // 根据窗口宽度判断要加载的视频
      const targetSrc = windowWidth < 980 ? mobileSrc : desktopSrc;
      
      // 只有当视频地址变化时才重新加载，避免重复请求
      if (mainVideo.src !== targetSrc) {
        mainVideo.src = targetSrc;
        mainVideo.load();
      }
    }

    // 页面加载完成后执行一次切换
    window.addEventListener('load', switchVideo);
    // 窗口大小改变时自动切换视频
    window.addEventListener('resize', switchVideo);
  </script>
</body>

说明：

• 用原生JS实现，无需依赖第三方库，兼容性更好
• 监听窗口resize事件，用户拖拽窗口时自动适配
• 增加地址判断逻辑，减少不必要的视频加载请求

关键注意事项 #

1. 现代浏览器要求视频必须muted才能自动播放，不要移除该属性
2. 测试前清除浏览器缓存，避免旧视频文件干扰结果
3. 可根据你的实际需求调整媒体查询的分界宽度（如980px或1080px）

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