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

首先，你不能以这种方式使用<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;和position: absolute;，您可以margin: 30px 0px 0px 40px;使用#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的{{1}}。 ~~并且有一件事：你的z-index将无法点击（因为它位于图层下）~~根据@ brichins的comment，它也可以在图层下点击视频（谢谢！）。

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

Answer 2

您可以将图像设置为稍微大于视频的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 3

尝试类似http://jsfiddle.net/CNj3A/338/

的内容

它包含一个带背景图像的div。我还设置了填充属性，因此即使在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 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%;
}

HTML：在图像中播放视频

4 个答案: