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

【问题标题】：How to make a better transition of <video> background in css如何在 css 中更好地过渡 <video> 背景
【发布时间】：2015-03-19 09:56:26
【问题描述】：

我的网页中有一个 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 秒视频结束时，视频从头开始重复，并且它开始的方式不吸引眼球，因为视频的结尾部分和视频的起点没有很好地连接。

有没有一种方法可以让我制作像褪色效果这样的过渡，以便我的壁纸循环会更好？ tia

【问题讨论】：

看来您在类型为 video/webm 的源中有错误，您应该有一个具有该扩展名 (webm) 的文件
其实我没有错误，我只是想更好地转换/重复我的视频壁纸。

标签： css html html5-video

【解决方案1】：

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

见this and related questions。

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

【讨论】：