文章/答案/技术大牛

发布

社区首页 >问答首页 >如何放大其中心的视频，同时将其边缘保持在原来的位置并保持原来的大小？

问如何放大其中心的视频，同时将其边缘保持在原来的位置并保持原来的大小？
EN

Stack Overflow用户

提问于 2020-10-29 06:04:55

回答 2查看 1.2K关注 0票数 0

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

预期结果:视频放大，并在其边缘剪裁。这个视频的中间点放大了.

实际结果:我无法实现这个设计，因为：：后伪元素似乎对我的视频标签不起作用。如果没有JS的话，我就不可能有这么大的视频了。但是，至少鼠标过载的自动播放可以工作，而普通的缩放(比例变换)也能正常工作。(没有错误消息。)

有这样的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);
    }
  }
}

谢谢。

javascript

html

css

video

zooming

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-30 04:08:37

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

票数 1

Stack Overflow用户

发布于 2020-10-30 04:08:33

你想要剪裁。您可以使用剪辑选项掩蔽元素中的显示区域。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64585819

复制

相似问题

问如何放大其中心的视频，同时将其边缘保持在原来的位置并保持原来的大小？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何放大其中心的视频，同时将其边缘保持在原来的位置并保持原来的大小？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何放大其中心的视频，同时将其边缘保持在原来的位置并保持原来的大小？
EN