视频标签在第一次加载时恢复正常之前会短暂丢失宽高比

Question

当我的页面第一次加载时，视频在恢复正常之前会丢失宽高比：

​

​

我使用的是HTML视频标签：

<video src="https://cdn.shopify.com/s/files/1/0533/4394/4904/files/Website_Home_Page_Video_1_1.mp4?v=1617166502" muted="" loop="" autoplay="" poster="//cdn.shopify.com/s/files/1/0533/4394/4904/files/amalfi-logo-black.png?v=1616983296"></video>

CSS：

.hero video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
}

来源：https://amalfitiles.com/

Answer 1

首先，我真的很喜欢这个网站。问题是你已经向后写了你的视频元素，poster应该放在前面，这样它就会在视频之前加载。

<video controls poster=""//cdn.shopify.com/s/files/1/0533/4394/4904/files/amalfi-logo-black.png?v=1616983296"">
    <source src="https://cdn.shopify.com/s/files/1/0533/4394/4904/files/Website_Home_Page_Video_1_1.mp4?v=1617166502" muted="" loop="" autoplay="" type="video/mp4">
</video>