Safari 浏览器在版本 17.2.1 中显示播放按钮/不自动播放背景视频

Question

我为我的网站制作了一个适用于所有浏览器的背景视频。但 Safari 浏览器似乎存在某种问题

Version 17.2.1

。默认情况下，视频将停止并且播放按钮将可见（其他浏览器并非如此）。

请查看以下代码片段（请打开整页以便更好地理解）：

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

<!-- The video -->
<video aria-label="background-video" aria-hidden="true" preload="true" role="presentation" muted loop playsInline autoPlay id="myVideo">
  <source src="https://dl6.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
</video>

<!-- Optional: some overlay text to describe the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
</div>

我已经给出了社区中其他人建议的所有属性

muted loop playsInline autoPlay

，但它似乎不适用于 Safari 浏览器

Version 17.2.1

。

tldr；如何解决背景视频在开始时显示播放按钮并保持暂停（不自动播放）的问题（仅在 Safari 浏览器上）？

编辑：我刚刚发现只有当系统处于省电模式时才会出现此问题

如果您有 safari 浏览器，您可以打开此问题（运行代码片段）并将其与 chrome 或 Firefox 浏览器进行比较。

还有其他主要网站也面临这个问题，如果有人需要列表我也可以提供吗？这是一个主要的

Answer 1

有一个非常有用的 CSS 文件，称为 normalize CSS。该文件摆脱了所有不同的浏览器预设。我希望这对你有帮助！