我正在尝试在电视的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,也可以在图层下点击视频(谢谢！).
当然电视的屏幕部分必须是透明的！
