HTML - 如何把一个视频播放器内的文本？

Question

我怎样才能把一个文本或可以说，我想提出一个文本Logo在我的视频播放器这里面也是这样吗？

我怎样才能做到这一点，请帮助表示感谢。

<video width="320" height="240" controls src="video/flashtrailer.mp4">
  Your browser does not support the video tag.
</video>

Answer 1

这里是工作代码：http://jsfiddle.net/kp81m9v6/3/

你把你的video，并在包装​​img您div。

然后，你必须只需要添加的位置，并指定包装内的z索引和你做

HTML：

<div id="wrapper">
  <img src="https://brandmark.io/logo-rank/random/pepsi.png" width="50" height="50">
  <video width="320" height="240" controls src="video/flashtrailer.mp4">
    Your browser does not support the video tag.
  </video>
</div>

CSS：

#wrapper{
  position: relative
}
#wrapper video{
  position: relative;
  z-index: 100;
}
#wrapper img{
  position: absolute;
  display: block;
  z-index: 150;
  left: 10px;
  top: 10px;
}

#wrapper{
  position: relative
}
#wrapper video{
  position: relative;
  z-index: 100;
}
#wrapper img{
  position: absolute;
  display: block;
  z-index: 150;
  left: 10px;
  top: 10px;
}

<div id="wrapper">
  <img src="https://brandmark.io/logo-rank/random/pepsi.png" width="50" height="50">
  <video width="320" height="240" controls src="video/flashtrailer.mp4">
    Your browser does not support the video tag.
  </video>
</div>

Answer 2

您将需要添加一个容器div然后进行video一个孩子，另一个div video的兄弟姐妹。然后使用于母公司相对定位和绝对的儿童。像这样：

.container
{
    width: 320px;
    height: 240px;
    position: relative;
}
.container video
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 320px;
    height: 240px;
    z-index: 1 !important;
}
.container .overlay
{
    position: absolute;
    top: 0;
    left: 10px;
    width: 100%;
    z-index: 2;
}
.container .overlay h3
{
    font-size: 1em;
    color: #fff;
    font-weight: bold;
}

<div class="container">
    <video width="320" height="240" controls src="video/flashtrailer.mp4">
        Your browser does not support the video tag.
    </video>
    <div class="overlay">
        <h3>Logo</h3>
    </div>
</div>