HTML：在图像中播放视频 [英] HTML : play a video inside an image

问题描述

我试图在电视的PNG图像中播放视频，以便将电视用作视频的框架。

我尝试了类似，但它只是推动电视图像，并播放下面的视频。

 < img class =tvsrc =images / tv.pngalt =Tv> 
< video width =320height =240> 
< source src =video / video.mp4type =video / mp4/> 
< / video> 
< / img> 
  

你能帮我找到我的方法吗？因为我确信有一个简单的解决方案，但我真的不知道在哪里看。
非常感谢！ >这种方式，因为它是一个不能包含其他元素的元素。

您只需将图像作为背景用于 div 然后以正确的位置显示视频：

 < div id =tv_container> 
< video width =320height =240> 
< source src =video / video.mp4type =video / mp4/> 
< / video> 
< / div> 
 
< style> 
 #tv_container {
 background：url（'images / tv.png'）no-repeat top left transparent; 
 width：400px; / *调整电视图像宽度* / 
 height：300px; / *调整电视图像高度* / 
位置：相对; 
} 
 #tv_container视频{
位置：绝对; 
 top：30px; / *调整顶部位置* / 
 left：40px; / *调整左侧位置* / 
} 
  
  

或代替 position：relative; 和 position：absolute; 您可以使用 margin：30px 0px 0px 40px; for #tv_container video （但是，如果您想在 #tv_container 中添加更多元素，位置 。

我假设电视图像大于 video ，但您必须调整少量内容才能正确显示。

---

受Guilherme J Santos'的启发，我建议你使用电视图像作为 video ，因为通过这种方式你可以使用电视画面，而不必是严格的矩形。当然，部分视频会被裁剪掉，但它看起来像电视画面。

 < div id =tv_container> 
< video width =320height =240 > 
< source src =video / video.mp4type =video / mp4/> 
< / video> 
< / div> 
 
< style> 
 #tv_container {
 width：400px; / *调整电视图像宽度* / 
 height：300px; / *调整电视图像高度* / 
位置：相对; 
} 
 #tv_container：after {
 content：''; 
 display：block; 
 background：url（'images / tv.png'）不重复左上透明; 
宽度：100％; 
身高：100％; 
 left：0px; 
 top：0px; 
位置：绝对; 
 z-index：10; 
} 
 #tv_container视频{
位置：绝对; 
 top：30px; / *调整顶部位置* / 
 left：40px; / *调整左侧位置* / 
 z-index：5; 
} 
< / style> 
  

确保图层 z-index （在这种情况下， #tv_container：在伪元素之后）大于 video 的 z索引。 有一件事：您的视频不会被点击（因为它在图层下）根据@ brichins的评论还可以使视频在该图层下可点击（谢谢！ ）。

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

I'm trying to play a video inside a PNG image of a TV so that the TV serves as a frame for the video.

I tried something like that, but it just pushes the TV image up and plays the video underneath.

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

Can you help me finding my way in there ? Because I'm sure there is an easy solution, but i really don't know where to look. Thank you so much !

解决方案

First of all, you can't use <img> this way, because it's an element which can't contain other elements.

All you have to do is put your image as a background for div and then display video with correct position:

<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>

or instead of position: relative; and position: absolute; you can use margin: 30px 0px 0px 40px; for #tv_container video (but trick with position is better when you want to add more element into #tv_container.

I assumed that TV image is bigger than video, but you have to adjust few things to display it correctly.

---

Inspired by Guilherme J Santos' answer, I suggest you to use TV image as layer over the video, because in this way you can use image with tv screen which doesn't have to be strict rectangle. Of course part of video will be cropped then, but it will look like tv screen.

<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>

Be sure z-index of the layer (which in this case is #tv_container:after pseudo-element) is greater than video's z-index. And there's one thing: your video will not be clickable (because it's under the layer) According to @brichins's comment it's also possible to make video clickable under the layer (thanks!).

Of course screen part of the tv must be transparent!

这篇关于HTML：在图像中播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！