遮罩视频SVG形状

Question

我想将视频插入SVG形状。

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

我尝试使用@scala.annotation.tailrec def isSorted[T : Ordering](values: List[T]): Boolean = { import scala.math.Ordering.Implicits._ values match { case fst :: snd :: _ if fst <= snd => isSorted(values.tail) case _ :: _ :: _ => false case _ => true } } CSS，并使用CSS创建形状以使用mask，但一无所获。

请帮助我！ 谢谢

Answer 1

您可以使用clip-path - CSS:和加object-fit

  

clip-path CSS属性创建一个剪切区域，用于设置   应该显示元素的一部分。区域内的零件   被显示，而外面的那些被隐藏。

只需将其应用于视频，而不使用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>