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

Question

我有一个 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 秒视频结束时，视频从头开始重复，并且开始的方式不吸引人，因为视频的结尾部分和视频的起点连接不当。

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

Answer 1

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

见this and related questions。

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

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

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

css

html

html5-video