Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/video/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
带有透明背景的文本的CSS视频不适用于safari_Css_Video_Safari_Clip Path - Fatal编程技术网

带有透明背景的文本的CSS视频不适用于safari

带有透明背景的文本的CSS视频不适用于safari,css,video,safari,clip-path,Css,Video,Safari,Clip Path,所以我试图制作一个标题文本动画,背景视频在字母中播放。下面的代码是我的解决方案,它可以在除safari之外的所有浏览器上完美地工作。我知道safari只部分支持剪辑路径,这可能就是问题所在。我一直在绞尽脑汁想办法,需要一些想法。下面的代码是否可以修改以使其在safari上工作,或者是否有其他方法可以实现相同的结果 这里可以看到我正在努力实现的一个例子 向下滚动至生活的海滩文本,背景为视频 非常感谢您的帮助 <svg> <defs> <clip

所以我试图制作一个标题文本动画,背景视频在字母中播放。下面的代码是我的解决方案,它可以在除safari之外的所有浏览器上完美地工作。我知道safari只部分支持剪辑路径,这可能就是问题所在。我一直在绞尽脑汁想办法,需要一些想法。下面的代码是否可以修改以使其在safari上工作,或者是否有其他方法可以实现相同的结果

这里可以看到我正在努力实现的一个例子 向下滚动至生活的海滩文本,背景为视频

非常感谢您的帮助

<svg>
    <defs>
        <clipPath id="clip-00" clipPathUnits="objectBoundingBox" transform="scale(0.0013208333333333333, 0.002225925925925926)">
            <path d="M741.58,421.68V373H613.37V313h71.39V264.7H613.37v-43H736.26V173.06H563.65V421.68Zm-206.13,0V173.06h-49V278.19c0,13.85.71,45.11.71,54.34-3.2-6.39-11.37-18.82-17.4-28.06L381.67,173.06h-47.6V421.68h49V312.29c0-13.85-.71-45.11-.71-54.34,3.19,6.39,11.36,18.82,17.4,28.06l91.28,135.67ZM267.31,297.73c0,50.43-23.09,78.49-57.9,78.49s-58.95-28.77-58.95-79.2,23.08-78.5,57.89-78.5,59,28.77,59,79.21m51.14-.71c0-80.27-44.4-127.86-109-127.86-65,0-110.1,48.3-110.1,128.57s44.4,127.85,109.39,127.85c64.64,0,109.75-48.3,109.75-128.56" />
            <path d="M486.4,278.2c0,13.9,0.7,45.1,0.7,54.3c-3.2-6.4-11.4-18.8-17.4-28.1l-88.1-131.4h-47.6v248.6h49V312.3
        c0-13.9-0.7-45.1-0.7-54.3c3.2,6.4,11.4,18.8,17.4,28.1l91.3,135.7h44.4V173.1h-49V278.2z" />
            
            
        </clipPath>
    </defs>
</svg>

<div class="video-container">
    <video loop autoplay muted playsinline>
        <source src="#" type="video/mp4">
        <source src="#" type="video/webm">
                <img src="#">
    </video>
</div>
video {
 -webkit-clip-path: url(#clip-00);
  clip-path: url(#clip-00);