Safari 17.4.1自适应装饰视频刷新后无法自动播放排查

问题背景 #

在集成装饰性自适应视频时，仅在Safari 17.4.1中出现异常：首次加载时视频可根据横竖屏自动切换并自动播放，但后续页面刷新后，视频仅显示 fallback 海报 ./img/img_1.png。现有实现通过<source>标签的media属性区分横竖屏视频源，同时配置了muted、loop、autoplay等自动播放属性。

已知现象 #

• 添加controls属性可解决播放问题，但视频为纯装饰性，不需要显示控制栏；
• 移除样式表链接能恢复播放，但无法舍弃页面样式需求；
• 直接在video标签的src指定单个视频可正常播放，但无法实现横竖屏切换不同视频的需求。

可行解决方案 #

方案1：JavaScript手动触发播放+监听方向变化

Safari刷新后可能未正确触发多源视频的自动播放逻辑，通过JS在页面加载后手动触发播放，并监听屏幕方向变化确保切换视频源后重新播放：

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/test.css">
</head>
<body>

<video playsInline preload='none' muted loop autoplay class="mm-banner-video"
       poster="./img/img_1.png">
  <source width="1920" height="1080"
          src="./videos/desktop.mp4"
          type="video/mp4" media="(orientation: landscape)">

  <source width="1080" height="1080"
          src="./videos/mobile.mp4"
          type="video/mp4" media="(orientation: portrait)">
</video>

<script>
const video = document.querySelector('.mm-banner-video');

// 页面加载完成后触发播放
window.addEventListener('load', () => {
  // Safari兼容处理：先暂停再触发播放
  video.pause().then(() => {
    video.play().catch(err => console.error('播放失败:', err));
  });
});

// 监听屏幕方向变化，延迟触发播放确保源切换完成
window.addEventListener('orientationchange', () => {
  setTimeout(() => {
    video.play().catch(err => console.error('方向切换后播放失败:', err));
  }, 100);
});
</script>

</body>
</html>

方案2：调整preload属性加载策略

Safari的preload='none'可能在刷新后阻止了视频源的预加载，导致自动播放失效。可将preload改为metadata或直接移除该属性，让浏览器预加载视频元数据：

<video playsInline muted loop autoplay class="mm-banner-video"
       poster="./img/img_1.png">
  <!-- source标签保持不变 -->
</video>

方案3：保留controls属性并通过CSS隐藏控制栏

如果添加controls能解决播放问题，可利用WebKit私有伪元素隐藏控制栏，兼顾播放功能和装饰性需求：

.mm-banner-video::-webkit-media-controls {
  display: none !important;
}
.mm-banner-video::-webkit-media-controls-enclosure {
  display: none !important;
}

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