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

您可以将图像设置为比视频稍大的 div 的背景。将视频放在 div 中居中，您会出现用图像框住视频。

<div id="video_container">
    <video width="320" height="240">
        <source src="video/video.mp4" type="video/mp4" />
    </video>
</div>

CSS：

#video_container { 
    background-image: url('images/tv.png'); 
    height: 300px;
    width: 400px;
}
video {
    text-align: center;
    /* or
    padding: 30px 40px;
    */
}

Answer 2

试试这样的http://jsfiddle.net/CNj3A/338/

它包含在一个带有背景图像的 div 中。我还设置了 padding 属性，所以即使在 div tvBorder 中有其他元素时，背景上的电视图像的边框也会显示出来。

在你里面插入你想要的任何元素。可能是<video>、其他<div>、<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>

Answer 3

首先，你不能这样使用<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>

或者你可以用margin: 30px 0px 0px 40px;代替position: relative;和position: absolute;来代替#tv_container video（但是当你想在#tv_container中添加更多元素时，position的技巧会更好。

我假设电视图像大于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 的z-index。 还有一件事：您的video 将无法点击（因为它位于图层下方） 根据@brichins 的comment，还可以在图层下方制作可点击视频（谢谢！）。

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

Answer 4

Bootstrap 在图片中嵌入视频：

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：

/* 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%;
}