缩放剪辑到 svg 路径的视频

Question

我仍然是 html 和 css 的初学者，但我正在尝试创建类似于 Apple Vision Pro 的 Memories 视频播放器的效果。

我发现可以做到这一点的唯一方法是将普通视频放入 div 中的视频标签中，然后将同一视频的模糊版本剪辑到空心矩形，然后也模糊该矩形。

效果很好，达到了预期的效果。我只是想扩展整个事情。我想让它响应。

    <body>
        <video  Style="position: absolute; top:0px; width:379px; height:213px ;overflow:hidden" autoplay muted controls>
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
            Your browser does not support the video tag.
        </video>
    <body/>
    <div Style="filter: blur(10px);">
        <video class="vid" Style="position: absolute; top:0px; width:379px; height:213px" autoplay muted>
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
            Your browser does not support the video tag
        </video>
    <div/>
    <svg xmlns="http://www.w3.org/2000/svg" width="379" height="213" viewBox="0 0 379 213" fill="none">
        <clipPath id="clip">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M379 47C379 21.0426 357.957 0 332 0H47C21.0426 0 0 21.0426 0 47V166C0 191.957 21.0426 213 47 213H332C357.957 213 379 191.957 379 166V47ZM307 95C307 69.0426 285.957 48 260 48H119C93.0426 48 72 69.0426 72 95V118C72 143.957 93.0426 165 119 165H260C285.957 165 307 143.957 307 118V95Z" fill="black"/>
        </clipPath>
    </svg>

.vid{
  clip-path:url(#clip);
  position: absolute;
  top:0px;
  backdrop-filter: blur(550px);
}

我现在有这个了。

这是JSFiddle，这是CodePen。

你可以吗？帮助我？

Answer 1

试试这个

您可以修改和调整

linear-gradient

，使其看起来像示例。

.video-container {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 20px;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    -webkit-clip-path: url(#clipPath);
    clip-path: url(#clipPath);
}

.blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 15%),
                  linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 15%),
                  linear-gradient(to left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 15%),
                  linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 15%);
}

<div class="video-container">
    <video autoplay muted controls>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
        Your browser does not support the video tag.
    </video>
    <div class="blur-overlay"></div>
</div>

缩放剪辑到 svg 路径的视频

问题描述投票：0回答：1

1个回答

最新问题

缩放剪辑到 svg 路径的视频

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1