logo标签列表

在<img>标签内播放<video>标签。

htmlimagevideo
11
我正在尝试在一个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>

你能帮我找到那里的路吗？因为我相信肯定有一个简单的解决办法，但我真的不知道该去哪里寻找。 非常感谢！
我完全没有使用过HTML 5，但是如果你设置z-index会怎样呢？ - Limey
在包装器div中使用图像作为背景。 - Paul
1
Safari的最新技术预览版允许使用<img src="video.mp4" />。https://codepen.io/shshaw/pen/MOMezY - Ryan
4个回答
9
首先，你不能像这样使用<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的技巧更好）。我假设TV图像比video大，但你需要调整一些东西才能正确显示它。
受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>

请确保此层（在本例中为#tv_container:after 伪元素）的z-index大于video的z-index。注意，由于处于该层下方，您的video将无法被点击。根据@brichins的评论，也可以使视频在层下方可点击（感谢！）。
当然，电视机屏幕部分必须是透明的！
太完美了，它可以工作！视频不会可点击，但无论如何都设置为自动播放。非常感谢 :) - Simon Be
2
可以使类似这样的底层视频可点击 - 只需在覆盖层上设置 style="pointer-events:none"。点击事件将直接穿过它。 - brichins
视频本身不可点击，但您可以在视频底部添加控件以添加此功能。只需将“controls”属性添加到“video”元素中：<video width="320" height="240" controls> - Alex Steinberg
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;
    */
}
它可以放置视频。但是视频播放在电视上方，而我希望它在电视后面。 z-index似乎没有任何区别。 - Simon Be
z-index 只对定位元素（position:absolute、position:relative 或 position:fixed）生效。请查看我的回答（第二部分）。 - Wirone
谢谢Wirone，我之前不知道z-index的事情。 - Simon Be
我不确定我理解了。如果视频在图像下面，用户怎么看到视频呢？ - George Cummins
很简单：图像的一部分是透明的 :) - Wirone
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>
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://istack.dev59.com/zZNgk.webp) 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%;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接