HTML:在图像中播放视频

Question

我正在尝试在电视的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>  

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

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.

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

灵感来自Guilherme J Santos的回答,我建议你使用电视图像作为图层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's z-index.还有一件事:你video不会被点击(因为它在图层下)根据@ brichins的评论,它也可以在图层下点击视频(谢谢!).

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