如何在其中心放大视频，同时剪切其边距以保留在原始位置和原始大小？

Question

我想做一个小的设计部分：一个静音运行的视频，当鼠标经过它时它会放大，但它仍然是相同的大小，因为它在边缘被剪裁了。如果把视频放大到鼠标光标在上面的那个点就更漂亮了

预期结果：视频放大并在其边缘处被剪裁。视频在其中心点放大。

实际结果：我无法实现此设计，因为 ::after 伪元素在视频标签上似乎对我不起作用。如果没有 JS，我无法获得 div 来获得视频的大小。但至少鼠标悬停自动播放有效，正常的放大（比例变换）效果很好。（没有错误消息。）

是否有执行此操作的 JS 库？

HTML

<div class="video container">
  <!-- <div class="single video container"> -->
    <video src="/wp-content/themes/square-motion/video/Pexels Videos 1456685.mp4" muted loop></video>
  <!-- </div> -->
</div>

SCSS

.video.container {
  grid-row: 1/2;
  grid-column: 1/2;
  display: flex;

  video {
    width: 38vh;
    height: 30vh;
    position: relative;
    left: 15vw;
    top: 15vh;
    transition: transform 0.2s;
    overflow: hidden;

    &:hover {
      transform: scale(1.2);
    }
  }
}

谢谢。

Answer 1

您想要剪裁。您可以使用 clip 选项来屏蔽元素中的显示区域。

在您的 div 中，创建一个矩形来定义内容的“查看区域”（值采用 px 格式）。

<div class="video container" style="clip: rect(X-Pos, Width, Height, Y-Pos);">

下面是我的示例代码，您可以测试它以了解解决方案。容器 <div> 有一个 onMouseOver="do_VidZoom()" 来做缩放效果。视频大小增加了，但它只在矩形的边缘内保持可见（就像它是 window）。

<!DOCTYPE html>
<html>

<body>

<div class="video container" onMouseOver="do_VidZoom()" width="640" height="480" style="position: absolute; top: 0px; left: 0px; clip: rect(0px, 640px, 300px, 0px);">
 
<video id="vid" width="640" height="480" muted loop>
<source src="/wp-content/themes/square-motion/video/Pexels Videos 1456685.mp4" type="video/mp4">
</video>

</div>

</body>


<script>

function do_VidZoom ()
{ 
    //# setup animation keyframes : from scaleX/Y = 1 (normal size) up to scaleX/Y = 2 (double size)
    var frames_VidZoom_In = [
                                { transform: 'scale(1, 1)', transition: 'transform 0.1s' },
                            
                                { transform: 'scale(2, 2)', transition: 'transform 0.1s' }
                                    
                            ];
    
    //# apply animation to an element
    document.getElementById("vid").animate( frames_VidZoom_In, { duration: 3000, easing: 'ease-in' } );
    
        
    //# set final size after animation ends ( or else it jumps back to scale=1 )
    document.getElementById("vid").style.transform = "scale(2,2)";
    
}

</script>
</html>

Answer 2

我取得了一些不完美的东西，但目前对我来说已经足够了。问题是视频处于 cover 模式，因此视频元素未显示其全部内容，但视觉效果相似。

<div class="videos">
  <div class="video">
    <video src="/wp-content/themes/square-motion/video/Pexels Videos 1456685.mp4" muted loop></video>
  </div>
</div>

以及工作中的 SCSS：

.videos {
  grid-row: 1/2;
  grid-column: 1/2;

  .video {
    position: relative;
    left: 15vw;
    top: 20vh;
    width: 38vh;
    height: 30vh;
    overflow: hidden;

    video {
      width: 38vh;
      height: 30vh;
      object-fit: cover;
      transition: transform 0.2s;

      &:hover {
        transform: scale(1.2);
      }
    }
  }
}

如何在其中心放大视频，同时剪切其边距以保留在原始位置和原始大小？

How to zoom in video in its center while clipping its margin to remain in the original place and with the original size?

html

javascript

css

video

zooming

HTML

SCSS