带剪辑路径的视频在 Safari 中不显示/不工作

Question

我用剪辑路径创建了一个视频。它在 Chrome 和 Firefox 上运行良好。但它在 Safari 中不起作用。视频不可见。只有当我在 safari 的浏览器控制台中停用剪辑路径时，我才能看到视频。所以问题似乎是因为剪辑路径或剪辑路径的 svg 标签中的问题而发生的。有人知道为什么以及如何解决这个问题吗？

我的代码如下：

body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

video {
  margin-right: 0;
  width: 46vw;
    height: 100vh;
    object-fit: cover;
}

.video-container {
  position: absolute;
  margin-left: 54vw;
  height: 100vh;
}

.border-container {
  position: absolute;
  right: 0;
  height: 100vh;
  width: 50vw;
}

.svg-clipped-text {
  -webkit-clip-path: url(#svgTextPath);
    clip-path: url(#svgTextPath);
}

.st0{fill:#E30D45;}

.svg-border {
    left: 0;
    height: 100vh;
    margin-left: 54vw;
    position: absolute;
}

  <div class="video-container">
      <video id="video1" width="1452" height="2000"  class="svg-clipped-text" muted autoplay loop>
       <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
      </video>

    </div>


    
      <svg viewBox="0 0 A B" max-width="100%" width="100" max-height="100vh" height="100">
        <clipPath id="svgTextPath">
            <polygon class="st0" points="243.1,1997.3 0,0 1851.2,0 1851.2,1997.3    "/>
         </clipPath>
      </svg>

      
      <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 4410.9 1997.3" class="svg-border" xml:space="preserve">
   <g>
     <g>
       <path class="st0" d="M4330.9,80v1837.3H314L90.3,80H4330.9 M4410.9,0H0l243.1,1997.3h4167.8V0L4410.9,0z"/>
     </g>
   </g>
   </svg>

Answer 1

我不知道为什么直接在视频上剪辑不起作用，但如果我们将剪辑移动到容器元素，那么视频确实会被剪辑，所以这可能对您的情况有所帮助：

    body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }

    video {
      margin-right: 0;
      width: 46vw;
        height: 100vh;
        object-fit: cover;
    }

    .video-container {
      position: absolute;
      margin-left: 54vw;
      height: 100vh;
    }

    .border-container {
      position: absolute;
      right: 0;
      height: 100vh;
      width: 50vw;
    }

.svg-clipped-text {
      -webkit-clip-path: url(#svgTextPath);
        clip-path: url(#svgTextPath);
    }

    .st0{fill:#E30D45;}

    .svg-border {
        left: 0;
        height: 100vh;
        margin-left: 54vw;
        position: absolute;
    }

      <div class="video-container svg-clipped-text">
          <video id="video1" width="1452" height="2000" muted autoplay loop>
           <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
          </video>

        </div>


        
          <svg viewBox="0 0 A B" max-width="100%" width="100" max-height="100vh" height="100">
            <clipPath id="svgTextPath">
                <polygon class="st0" points="243.1,1997.3 0,0 1851.2,0 1851.2,1997.3    "/>
             </clipPath>
          </svg>

          
          <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          viewBox="0 0 4410.9 1997.3" class="svg-border" xml:space="preserve">
       <g>
         <g>
           <path class="st0" d="M4330.9,80v1837.3H314L90.3,80H4330.9 M4410.9,0H0l243.1,1997.3h4167.8V0L4410.9,0z"/>
         </g>
       </g>
       </svg>

Answer 2

我可以确认 Luis 报告的问题和 A Haworth 的解决方案都有效。

显然，即使 Safari 是 webkit，并且 Chrome 是 webkit，一些怪癖导致只有 Safari 在直接在 <video> 上指定时无法应用 clip-path。使用 <div class="container><video/></div> 包装视频并将 clip-path 应用于容器是有效的解决方法。

有趣的是：直接在 <video> 上裁剪后，它在 Safari 选项卡概览中正确呈现（甚至裁剪）

带剪辑路径的视频在 Safari 中不显示/不工作

Video with Clip Path is not showing / working in Safari

html

css

video

svg

clip-path