it-swarm.com.ru

Получение полноэкранного HTML5 Video Background Blur для работы?

Я, кажется, попробовал все уловки в книге здесь, и ничего не работает.

У меня полноэкранный HTML5-фон с абсолютным позиционированием, который мне нужно размыть. Тем не менее, я хотел бы иметь острые края.

До сих пор я пробовал около 20 или 30 различных решений онлайн, но ничего не помогло.

Вот что я попробовал:

-Установка отрицательных полей

-Установка отрицательных полей сверху, слева, справа, снизу

-Установка положительных полей в контейнере со скрытым переполнением

-Установка в контейнере со скрытым переполнением

-Методы, отмеченные здесь: Определенные края с размытием фильтра CSS - Определенные края с размытием фильтра CSS - Размытие CSS и сохранение острых краев с использованием абсолютного div - размытие абсолютного фона при сохранении сплошных краев - 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);
}

Может быть, я сделал что-то не так, я не совсем уверен. Есть ли что-то, что я делаю, что мешает этому работать?

Заранее благодарю за любую помощь!

7
Finn C

Будет ли это ручка соответствовать вашим потребностям?

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;
}

Возможно, вы захотите сделать это видео больше родительского и поместить его в центр, думаю, это избавит от этого белого размытия внутри границ родительского объекта.

2
Ashugeo

Возможно, вы захотите сделать это видео больше родительского и поместить его в центр, думаю, это избавит от этого белого размытия внутри границ родительского объекта.

@Ashugeo, я взял твой код и сделал то, что ты предложил несколько лет назад, и похоже, что он работает.

К сожалению, это не похоже на работу. Я также попытался сделать видео еще больше и отцентрировать его, но, похоже, не работает.

@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);
}
1
Erik.J