html - 屏蔽视频 SVG 形状

Question

我想将视频插入形状 SVG。

形状看起来像这样: 我将它们导出为 .svg

我尝试使用 mask CSS 并使用 CSS 创建形状以使用 overflow: hidden 但没有任何效果。

我需要你的帮助! 谢谢

Answer 1

您可以使用 clip-path - CSS:作为一个加号object-fit

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

无需使用 svg 即可将其应用于视频。

video {
    object-fit: cover;
    clip-path: url(resources.svg#c1);
}

这是一个演示

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0
}
figure{
  width: 100vw;
  height: 400px;
  position: relative;
  background-color: red; 
  overflow: hidden
}
video{
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 0, 88% 63%, 58% 94%, 46% 94%, 13% 63%, 0 0);
}
figcaption{
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 28vh;
  font-size: 3vw;
  font-weight: 900;
  text-transform: uppercase;
  z-index: 2;
}
 

<figure>
  <video controls controls autoplay preload="metadata" buffered loop>
 

      <source src="https://www.w3schools.com/html/mov_bbb.mp4"
              type="video/mp4">

      Sorry, your browser doesn't support embedded videos.
  </video>
  <figcaption>My Nice video</figcaption>
</figure>