具有多个视频源的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/

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

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

希望获得帮助：）