具有多个视频源的SVG掩码？

Posted 2021-03-28

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

理想情况下，上面的每个SVG圈将屏蔽将在不同层中的视频。然后我会将圆形变换为适合浏览器的高度/宽度

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

答案

如果我理解你，你可以使用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/

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

您可以根据需要添加任意数量的视频，隐藏控件，全屏播放等。

希望这有帮助:)