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

Question

我画了一部手机的轮廓。我需要将一些短视频片段放入手机屏幕。你会怎么做？

绘制的屏幕和视频比率是相同的。它当然需要响应，因此我的视频必须与帧（图形）一起缩放。由于图形，它不像将视频元素放在容器中那么简单。我试图用手机作为背景图像来实现它。现在我想到两个绝对定位的元素（手机和视频）相互重叠。也许一个div包含视频和一个绝对定位的伪元素::拿着图形后？

我经常把简单的事情变得复杂，所以请建议是否有更好的方法来实现它。

Answer 1

我假设您将绘制的框架作为背景图像应用于此处？

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

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

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

Answer 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%;
}

不幸的是，我需要确切地知道所包含视频所需手机的大小百分比。因此，我不认为这是最佳和最干净的解决方案。仍然希望有更好的想法。