时间戳

首页 > 解决方案 > 如何通过调整大小将图像叠加在视频之上？

html - 如何通过调整大小将图像叠加在视频之上？

问题描述

您好，我一直在尝试在可调整大小的容器中的视频顶部叠加图像。我尝试了许多示例，但每个示例似乎都特定于实现。我的最新测试在这里https://jsfiddle.net/1Lfsy95w/我无法使视频大小正确并且图像超出范围..两者都应保持 16:9 的纵横比，并根据父级调整大小

#player-overlay {
    display:block;
    position: absolute;
    width: 100%;
    height: auto;      
    z-index: 4;      
    opacity: .5;
}

#OutputVideo {      
    display: block;
    z-index: 1;
    background-color:red;
    width: 100%;
    max-height:100%;
    height:auto;        
}

和 html

<div id="wrapper">
  <img id="player-overlay" src="https://images.unsplash.com/photo-1580757468214-c73f7062a5cb"/>
  <video id="OutputVideo">
     <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"> 
  </video>
</div>

标签： htmlcssoverlay

解决方案

绝对定位的元素是相对于最近的非静态祖先设置的。您需要在包装器上设置位置：

#wrapper {
  position: relative;
}

为了防止图像将包装器推到视频下方，请隐藏溢出：

#wrapper {
  position: relative;
  overflow: hidden;
}

小提琴演示

您可以通过 1) 将图像作为背景和 2) 在视频之后移动叠加层来简化事情。这为您提供了更大的尺寸灵活性，并且无需摆弄 z-index。

#wrapper {
  position: relative;
}

#player-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .5;
  background-image: url(https://...);
  background-position: center;
  background-size: cover;
}

<div id="wrapper">
  <video controls id="OutputVideo">
    <source src="http://....webm" type="video/webm">
  </video>
  <div id="player-overlay"></div>
</div>

小提琴演示 2

推荐阅读