我用剪辑路径创建了一个视频。它在 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>
最佳答案
我不知道为什么直接在视频上剪辑不起作用,但是如果我们将剪辑移动到容器元素,那么视频会被剪辑,所以这可能对您的情况有所帮助:
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>
关于html - 带剪辑路径的视频在 Safari 中不显示/不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66278982/