如何在css中更好地过渡<video>背景

Question

如何在css中更好地过渡<video>背景

我的网页上有一个 10 秒的视频作为壁纸，仅使用纯 CSS。这是我的代码：

<style>
    video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
                }
</style>
<body>
     <video  autoplay loop poster="polina.jpg" id="bgvid">
       <source src="vidwallpaper.mp4" type="video/webm" />
       <source src="vidwallpaper.mp4" type="video/mp4 " />
    </video>
</body>

Run Code Online (Sandbox Code Playgroud)

当我的 10 秒视频结束时，视频会从头开始重复播放，而且开始的方式并不吸引眼球，因为视频的结尾部分和视频的起点没有很好地连接。

有没有办法可以做一个像淡入淡出效果的过渡，这样我的壁纸的循环会更好？蒂亚

Answer 1

ald*_*del 2

通常的解决方案是编辑视频，使结束到开始的过渡看起来更平滑。不幸的是，在某些浏览器上，它可能会在重新启动之前暂停一秒钟。

请参阅此问题和相关问题。

要进行交叉淡入淡出，您需要两个视频或两个包含相同视频的视频元素。你会玩一场，然后在结束前不久开始玩另一场。您会将一个视频放在另一个视频前面，并逐渐更改前面视频的不透明度以进行交叉淡入淡出。然后，您可以倒回不可见的视频，为下一次转换做好准备。

归档时间：	10 年，10 月前
查看次数：	6979 次
最近记录：	10 年，10 月前

如何在css中更好地过渡&lt;video&gt;背景

如何在css中更好地过渡<video>背景