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

我想做一些设计方面的事情：静音播放的视频，当鼠标移到它上面时，它会放大，但是它的大小仍然相同，因为它被限制在边缘。使视频放大到鼠标光标悬停在它上面的位置会更加美丽。

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

实际结果：我无法实现此设计，因为:: 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);
    }
  }
}

谢谢。

解决方法

您要剪切。您可以使用clip选项来遮罩元素中的显示区域。

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

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

下面是我的示例代码，您可以对其进行测试以获得一些解决方案的想法。容器<div>具有onMouseOver="do_VidZoom()"来执行缩放效果。视频大小增加了，但仅在矩形的边缘内可见（如窗口）。

<!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>

我取得了一些不完美的成就，但目前对我来说已经足够了。问题在于视频处于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);
      }
    }
  }
}