使用 HTML5 视频和 React 模糊视频背景答案

【问题标题】：Blur Video background using HTML5 video and React使用 HTML5 视频和 React 模糊视频背景
【发布时间】：2021-01-22 18:59:24
【问题描述】：

关于如何应用这种效果的任何建议？在画布元素上使用 drawImage 方法对我不起作用，因为 Safari IOS 不支持视频元素作为 drawImage 的来源。

【问题讨论】：

标签： javascript reactjs react-native html5-video

【解决方案1】：

添加两个视频元素 - 一个在另一个之上。底部缩放以填充并应用 CSS 模糊过滤器，顶部缩放以适应不模糊。

#fg {
  position: absolute;
  top: 50px;
  left: 100px;
}

#bg {
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(20px);
}

div {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 220px;
}

<div>

<video id="bg" width="400" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>

<video id="fg" width="200" autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>

</div>

【讨论】：

我也想过这个问题，但是同时播放两个视频会影响移动端的性能。因为它是流服务应用程序。我可以使用画布做到这一点，但不幸的是 Safari IOS 不支持画布方法 imageDraw：developer.apple.com/documentation/webkitjs/…
@RenatoGuimaraesNunes 它会，但不会加载，他们应该能够共享源 - 你没有下载图像两次，你只是处理它两次，有点你将拥有无论如何都要模糊它（无论是在画布中逐帧还是作为两个视频元素）。