HTML：在图像中播放视频

我正在尝试在电视的PNG图像中播放视频,以便将电视用作视频的帧.

我尝试了类似的东西,但它只是将电视图像向上推,然后播放下面的视频.

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

你能帮我找到路吗？因为我确信有一个简单的解决方案,但我真的不知道在哪里看.
非常感谢 ！

解决方法

首先,你不能使用< 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>

或者代替位置：相对;和位置：绝对;你可以使用保证金：30px 0px 0px 40px;对于#tv_container视频(但是当你想在#tv_container中添加更多元素时,有位置的技巧会更好.

我认为电视图像比视频大,但你必须调整一些东西才能正确显示它.

灵感来自Guilherme J Santos的回答,我建议你使用电视图像作为视频层,因为通过这种方式你可以使用带有电视屏幕的图像,而不必是严格的矩形.当然部分视频会被裁剪,但它看起来像电视屏幕.

<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 pseudo-element)大于视频的z-index.还有一件事：你的视频无法点击(因为它位于图层下)根据@ brichins的comment,也可以在图层下点击视频(谢谢！).

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

原文地址：https://www.jb51.cc/html/226148.html