Question

我的网页上只有使用纯css的10秒视频作为我的壁纸。这是我的代码：

<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

Answer 1

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

请参阅this and related questions。

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

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

1 个答案: