9

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

你能帮我找到进去的路吗？因为我确信有一个简单的解决方案，但我真的不知道去哪里找。太感谢了 ！

4

4 回答 4

7

首先，你不能使用<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;andposition: absolute;你可以使用margin: 30px 0px 0px 40px;for #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 的评论，还可以在图层下方制作可点击视频（谢谢！）。

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

于 2012-06-04T13:07:52.383 回答
4

您可以将图像设置为比视频稍大的 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;
    */
}
于 2012-06-04T12:56:46.433 回答
2

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

它包含在带有背景图像的 div 中。我还设置了填充属性，因此即使在 div tvBorder 内有一些其他元素，背景上的电视图像的边框也会显示出来。

在里面插入你想要的任何元素。可以是 a <video>, other <div>, an <image>etc.

 <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>
于 2012-06-04T13:06:16.437 回答
1

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%;
}
于 2018-05-23T14:14:31.843 回答