HTML : 在图像中播放视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10881678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML : play a video inside an image
提问by Simon Be
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.
我正在尝试在电视的 PNG 图像中播放视频，以便电视作为视频的框架。
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 !
你能帮我找到进去的路吗？因为我确定有一个简单的解决方案，但我真的不知道去哪里找。非常感谢 ！
采纳答案by Wirone
First of all, you can't use <img>this way, because it's an element which can't contain other elements.
首先，你不能这样使用<img>，因为它是一个不能包含其他元素的元素。
All you have to do is put your image as a background for divand then display video with correct position:
您所要做的就是将您的图像作为背景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>
or instead of position: relative;and position: absolute;you can use margin: 30px 0px 0px 40px;for #tv_container video(but trick with positionis better when you want to add more element into #tv_container.
或者代替position: relative;andposition: absolute;你可以使用margin: 30px 0px 0px 40px;for #tv_container video（但是position当你想在#tv_container.
I assumed that TV image is bigger than video, but you have to adjust few things to display it correctly.
我假设电视图像大于video，但您必须调整一些东西才能正确显示它。
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.
受到 Guilherme J Santos 回答的启发，我建议您将 TV 图像用作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>
Be sure z-indexof the layer (which in this case is #tv_container:afterpseudo-element) is greater than video's z-index. And there's one thing: your According to @brichins's commentit's also possible to make video clickable under the layer (thanks!).videowill not be clickable (because it's under the layer)
确保z-index层（在这种情况下是#tv_container:after伪元素）大于video's z-index。还有一件事：您根据@brichins 的评论，还可以在图层下方设置视频可点击（谢谢！）。video将无法点击（因为它位于图层下方）
Of course screen part of the tv must be transparent!
当然电视的屏幕部分必须是透明的！
回答by George Cummins
You can set the image as a background of a div slightly larger than the video. Center the video in the div, and you will appear to frame the video with the image.
您可以将图像设置为比视频稍大的 div 的背景。在 div 中将视频居中，您将出现用图像框住视频。
<div id="video_container">
<video width="320" height="240">
<source src="video/video.mp4" type="video/mp4" />
</video>
</div>
CSS:
CSS：
#video_container {
background-image: url('images/tv.png');
height: 300px;
width: 400px;
}
video {
text-align: center;
/* or
padding: 30px 40px;
*/
}
回答by Guilherme de Jesus Santos
Try something like this http://jsfiddle.net/CNj3A/338/
试试这样的http://jsfiddle.net/CNj3A/338/
It consist in a div with a background image. I also set padding atribute, so the borders of the tv image on background will be displayed even with some other element inside the div tvBorder.
它包含在一个带有背景图像的 div 中。我还设置了填充属性，因此即使 div tvBorder 内有一些其他元素，背景上电视图像的边框也会显示。
Inside you insert any element you want. Could be a <video>, other <div>, an <image>etc.
在里面插入你想要的任何元素。可以是 a <video>、 other <div>、 an<image>等。
<div id="tvBorder" style="background-image: url('https://mockuphone.com/static/images/devices/samsung-galaxys4-black-portrait.png'); background-repeat:no-repeat; width:625px; height:532px; padding-left:250px; padding-top:150px;">
<video controls autoplay height="450" width="250" style="object-fit: fill">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
回答by Cnab
Bootstrap embed video inside image:
Bootstrap 在图像中嵌入视频：
HTML Code:
HTML代码：
/* Example 1 */
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="laptop-wrapper">
<iframe width="560" height="315" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
/* Example 2 */
<div class="container">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="desktop-wrapper">
<iframe width="560" height="315" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
/* Example 3 */
<div class="container">
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-image: url(' http://img01.deviantart.net/05b6/i/2011/030/8/5/apple_led_cinema_screen_by_fisshy94-d38e3o5.png'); background-repeat:no-repeat; width:900px; height:758px; padding:80px;text-align:center;">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header-unit">
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src="http://yourwebsite.com/your-video-file.mp4" type="video/mp4"/>
<source src="http://yourwebsite.com/your-video-file.ogg" type="video/ogg"/>
<source src="http://yourwebsite.com/your-video-file.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
</div>
</div>
</div>
</div>
CSS:
CSS：
/* 1st example */
div.laptop-wrapper {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
}
div.laptop-wrapper iframe {
box-sizing: border-box;
background: url(https://i.stack.imgur.com/zZNgk.png) center center no-repeat;
background-size: contain;
padding: 11.9% 15.5% 14.8%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 2nd example : BACKGROUND IMAGE */
div.desktop-wrapper {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
}
div.desktop-wrapper iframe {
box-sizing: border-box;
background: url(http://img01.deviantart.net/05b6/i/2011/030/8/5/apple_led_cinema_screen_by_fisshy94-d38e3o5.png) center center no-repeat;
background-size: contain;
padding: 3.4% 10.8% 18.6%;/* 11.9% 15.5% 14.8% */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 3rd example : BACKGROUND IMAGE */
.header-unit {
height: 150px;
border: 2px solid #000;
border-right:none;
border-left: none;
position: relative;
padding: 20px;
}
#video-container {
position: absolute;
}
#video-container {
top:0%;
left:0%;
height:100%;
width:100%;
overflow: hidden;
}
video {
position:absolute;
z-index:0;
}
video.fillWidth {
width: 100%;
}
