javascript - 在带有视频的页面上缓慢淡入 - Chrome

Question

当我尝试通过单击按钮显示简单的弹出窗口时，我有一个减慢淡入效果。没有视频，一切正常。我页面上的视频具有 100% 大小和固定位置

video#bgvid{
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background-size: cover;
}

此外，还有一个弹出的html代码

<div class="blackpopup">
  <div class="container">
  </div>
</div>

和CSS:

.blackpopup{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.58);
}

Javascript 代码很简单:

var popUpThank = jQuery(".blackpopup");
    var submitButton = jQuery("#submit");

    submitButton.click(function(e){
        e.preventDefault();
        popUpThank.fadeIn();
    });

那么，如何让它不那么慢，问题出在哪里呢？

Answer 1

答案是:不要让浏览器的内存充满大量视频。尝试执行相同的操作，删除它将起作用的视频标签。更好地压缩它，或者以低质量压缩它，因为它是背景对象。为此，我可以向您推荐 sorenson squeeze 应用程序。