让全屏 HTML5 视频背景模糊起作用？

Question

我似乎已经尝试了本书中的所有技巧，但没有任何效果。

我有一个全屏、绝对定位的 HTML5 视频背景，我需要对其进行模糊处理。不过，我希望它有锋利的边缘。

到目前为止，我已经在网上尝试了大约 20 或 30 种不同的解决方案，但似乎没有任何效果。

这是我尝试过的方法：

-设置负边距

-设置负的上、左、右、下边距

-在隐藏溢出的容器中设置正边距

-设置在隐藏溢出的容器中

-此处注明的方法：Defined Edges With CSS3 Filter Blur - Defined Edges With CSS3 Filter Blur - CSS blur and retain sharp edges using absolute div - Blur absolute background whilst retaining solid edges - http://volkerotto.net/2014/07/03/css-background-image-blur-without-blury-edges/

目前的代码如下：

HTML

<video id="videobcg" preload="auto" autoplay="true" loop="loop"     muted="muted" volume="0">
<source src="vid/myVid.mp4" type="video/mp4">
<source src="vid/myVid.webm" type="video/webm">
    Sorry, your browser does not support HTML5 video.
</video>

CSS

#videobcg {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100% !important;
    max-height: 100% !important;
    z-index: -1000;
    overflow: hidden;
    object-fit: fill;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
}

也许我做错了什么，我不太确定。我正在做的事情会阻止它工作吗？

在此先感谢您的帮助！

Answer 1

这个pen能满足您的需求吗？

HTML

<div id="container">
    <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
    </video>
</div>

CSS

#container {
  width: 640px;
  height: 360px;
  overflow: hidden;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
}

#videobcg {
  width: 100%;
  height: auto;
}

您可能想让该视频比父视频大并在其中居中，我认为这样可以消除父视频边框内的白色模糊。

Answer 2

You might want to make that video bigger than the parent and center it inside it, I think that would get rid of that white blur inside the borders of the parent.

@Ashugeo，我按照你多年前的建议做了你的代码，它似乎有效。

Unfortunately, this doesn't seem to work. I also tried making the video even bigger and centering it, still doesn't seem to work.

@Finn C，如今它似乎可以使用转换： https://jsfiddle.net/Erik_J/6f483wm9/

HTML

<div id="container">
    <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
    </video>
</div>

CSS

body{ margin:0;}

#container {
    width: 100vw;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}
#videobcg {
    width: inherit;
    height: inherit;
    -o-filter: blur(15px);
    filter: blur(15px);
    object-fit: cover;
    transform: scale(1.04);
}

让全屏 HTML5 视频背景模糊起作用？

Getting a full-screen HTML5 Video Background Blur to work?

css

html

html5-video

css-filters