css - 具有多个视频源的 SVG 蒙版？

Question

不确定这是否可行，但我正在尝试查看是否可以为不同的视频 DOM 元素设置一个 SVG 圆形掩码，这些元素都将被修复。

理想情况下，上面的每个 SVG 圆圈都会遮住将位于不同图层中的视频。然后我会改变圆圈以适应浏览器的高度/宽度

我已经尝试了所有不同的代码示例，所以将代码放在这里不会有任何不同，只是在寻找一个方向，看看这在技术上是否可行，并让我朝着正确的方向前进

Answer 1

如果我理解你的意思，你可以使用 clip-path，像这样:

video {
  width: 320px;
  height: 240px;
  clip-path: circle(20%);
}

video.full {
  width: 100%;
  height: 100%;
  clip-path: none;
}

.hide {
  display: none;
}

https://jsfiddle.net/deaxfcbk/

打开上面链接的示例并点击一个视频，它将按比例填充结果区域，其他视频将被隐藏。如果你再次点击它会变成一个圆圈。

您可以添加任意数量的视频、隐藏控件、全屏播放等。

希望这有帮助:)