定位 html5 视频元素以适应自定义图形答案

【问题标题】：Position an html5 video element to fit into custom graphics定位 html5 视频元素以适应自定义图形
【发布时间】：2018-09-22 21:43:44
【问题描述】：

我已经画出了手机的轮廓。我需要在手机屏幕上放一些短片。你会怎么做？

绘制的屏幕和视频比例相同。它当然需要响应，所以我的视频必须随帧（图形）缩放。由于图形的原因，它不像将视频元素放在容器中那么简单。我试图首先用手机作为背景图像来实现它。现在我正在考虑两个绝对定位的元素（电话和视频）相互重叠。也许是一个包含视频的 div 和一个绝对定位的伪元素 ::after 持有图形？

我经常把简单的事情复杂化，所以如果有更好的方法来实现它，请告知。

【问题讨论】：

标签： css html video background-image positioning

【解决方案1】：

我假设您在这里将绘制的框架用作背景图像？

您肯定必须嵌套两个 div 才能获得正确的定位，但您最好在视频容器上使用 object:fit 将其嵌套到提供的空间中，而不是对这两个 div 应用绝对定位。这样，您只需在绘制的帧上设置格式，CSS 将处理视频格式。

here 有一个很好的细分和演示。

请记住（与所有事情一样），IE 存在兼容性问题。不过，其他一切都是兼容的。

【讨论】：

嗯，是的 object:fit 是一个很好的声明。然而，这里的问题是将绘制的帧与视频容器完美匹配，并在缩放期间保持在一起。

【解决方案2】：

我已经实现了，尽管我仍然认为这不是一个好的解决方案。问题在于将视频容器与绘制的帧完美匹配。我通过将图形框架作为绝对定位的伪元素:after 添加到视频容器中来做到这一点。伪元素（手机绘图）按比例放大以将视频包含在手机屏幕应该在的位置。 html:

<div class="outer-wrapper">
      <div class="clip-container">
        <video loop muted autoplay poster="" >
          <source src="img/my_clip.mp4" type="video/mp4">
        </video>
      </div>
</div>

和 CSS：

.clip-container {
  position: relative;
  max-width: 300px;
}
.clip-container:after {
  position: absolute;
  content: "";
  background-image: url(../img/iphone_stroke.svg);
  z-index: 1000;
  left: -18%;
  bottom: -18%;
  background-repeat: no-repeat;
  width: 135%; /* Relative size of the graphics to contain the video */
  height: 135%;
}

不幸的是，我需要以百分比的形式准确了解绘制的手机需要多大才能包含视频。因此，我认为这不是最佳且干净的解决方案。仍然希望有更好的想法。

【讨论】：