Question

我想在html视频前放置一张图片。到目前为止，这是我的代码：

    <style>
    video.videos {
        background-image: url(image.png);
        background-repeat: no-repeat;
        z-index:1;
    }
    </style>

<video id="Video1" class="videos" >
    <img src="image.png" align="absmiddle" style="z-index:2;" >
    <source src="video1.mp4" type="video/mp4"></source> 
         Browser does not support HTML5. Video could not be loaded.

</video>

但是使用z-index并不能使它正常工作。我的意思是，图像仍然在视频文件后面。有可能解决这个问题吗？也许还有其他方式吗？

Answer 1

将其放在视频标记之外，并使用此样式定位它：

top: 100px; left: 100px; z-index: 0; position: absolute;

当然，您需要根据具体应用调整值。如果绝对定位不适合您，您可以始终使用相对定位，这可以更灵活。有关在视频前定位图像的示例，请参阅JSFiddle。

Answer 2

你对html视频的意思是什么意思？如果它是图像海报，你可以使用它：

<video width="320" height="240" poster="/images/w3html5.gif" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>

将图像放在html视频前面

2 个答案: