我为我的网站制作了一个适用于所有浏览器的背景视频。但 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 浏览器进行比较。
还有其他主要网站也面临这个问题,如果有人需要列表我也可以提供吗?这是一个主要的
有一个非常有用的 CSS 文件,称为 normalize CSS。该文件摆脱了所有不同的浏览器预设。我希望这对你有帮助!