HTML : play a video inside an image

Question

我正在尝试在电视的 PNG 图像中播放视频，以便电视充当视频的框架。

我尝试过类似的方法，但它只是将电 View 像向上推并在下方播放视频。

<img class="tv" src="images/tv.png" alt="Tv">
  <video width="320" height="240">
    <source src="video/video.mp4" type="video/mp4" />
  </video>
</img>  

你能帮我找到进去的路吗？因为我确定有一个简单的解决方案，但我真的不知道去哪里找。太感谢了 !

Answer 1

首先，你不能使用<img>这样，因为它是一个不能包含其他元素的元素。

您所要做的就是将您的图像作为 div 的背景然后显示正确位置的视频:

<div id="tv_container">
    <video width="320" height="240">
        <source src="video/video.mp4" type="video/mp4" />
    </video>
</div>

<style>
#tv_container {
    background: url('images/tv.png') no-repeat top left transparent;
    width: 400px; /* Adjust TV image width */
    height: 300px; /* Adjust TV image height */
    position: relative;
}
#tv_container video {
    position: absolute;
    top: 30px; /* Adjust top position */
    left: 40px; /* Adjust left position */
}
</style>

或代替 position: relative;和 position: absolute;你可以使用margin: 30px 0px 0px 40px;对于 #tv_container video (但是当你想在 position 中添加更多元素时，使用 #tv_container 会更好。

我假设电 View 像大于 video , 但您必须进行一些调整才能正确显示它。

---

受 Guilherme J Santos 的回答启发，我建议您使用电 View 像作为 video 上的图层。 ，因为通过这种方式，您可以将图像与电视屏幕一起使用，而不必是严格的矩形。当然部分视频会被裁剪，但它看起来像电视屏幕。

<div id="tv_container">
    <video width="320" height="240">
        <source src="video/video.mp4" type="video/mp4" />
    </video>
</div>

<style>
#tv_container {
    width: 400px; /* Adjust TV image width */
    height: 300px; /* Adjust TV image height */
    position: relative;
}
#tv_container:after {
    content: '';
    display: block;
    background: url('images/tv.png') no-repeat top left transparent;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 10;
}
#tv_container video {
    position: absolute;
    top: 30px; /* Adjust top position */
    left: 40px; /* Adjust left position */
    z-index: 5;
}
</style>

确定z-index层的(在本例中是 #tv_container:after 伪元素)大于 video的 z-index . 还有一件事:你的 video将不可点击(因为它在层下) 根据@brichins 的comment也可以使图层下的视频可点击(谢谢!)。

当然电视的屏幕部分必须是透明的!