带有视频html的剪切路径

Question

我在Safari浏览器中使用带有视频标签的clip-path属性时遇到问题。在chrome和firefox中，带视频的剪切路径效果很好。实际上，Saffary应该支持它，也许我的代码还有其他错误。请告诉我一些使其在Safari中起作用的信息。谢谢！

<video loop width="852" height="480" autoplay class="svg-clipped-text">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/bouncyballs.mp4" type="video/mp4">
</video>

<svg height="0" width="0">
  <clipPath id="svgTextPath">
     <text x="20" y="200" textLength="800px" lengthAdjust="spacing" font-family="Luckiest Guy" font-size="210px">
       BOUNCE
     </text>
   </clipPath>
</svg>
<br />
<a href="https://sarasoueidan.com/blog/css-svg-clipping/" title="Sara Soueidan is a freelance front-end Web developer, author and speaker from Lebanon." >Sara Soueidan's Excellent SVG Clipping Article</a>
<p>Safari/Edge/IE no joy :(</p>

    video{
  display:block;
  margin:20px auto;
}
.svg-clipped-text {
    -webkit-clip-path: url(#svgTextPath);
    clip-path: url(#svgTextPath);
}


a{
  display:block;
  text-align:center;
  margin-top: -200px;
}
p{
  text-align:center;
}

codepen

尝试玩here

Answer 1

您无法在Safari浏览器中的视频标签上使用剪切路径，因为它无法呈现形状。而不是在父块上使用clip-path，它将在Safari上运行。