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

How to make a better transition of <video> background in css

我有一个 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>

当我的 10 秒视频结束时,视频从头开始重复,并且开始的方式不吸引人,因为视频的结尾部分和视频的起点连接不当。

有什么办法可以让我的壁纸像淡入淡出一样过渡,这样我的壁纸循环会更好吗?蒂亚

通常的解决方法是编辑视频,使从头到尾的过渡看起来更流畅。不幸的是,在某些浏览器上,它可能会在重新启动前暂停一秒钟。

this and related questions

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