Javascript HTML-如何将文本放入视频播放器中？

我怎样才能像这样在视频播放器里面放一个文本或者说我想放一个文本

徽标

我如何才能做到这一点请帮助，谢谢

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

您的浏览器不支持视频标记。

以下是工作代码：

您将

视频

和

img

放入包装器

div

然后，您只需添加位置并在包装器中指定z索引，就完成了

HTML:

#包装器{
职位：相对
}
#包装视频{
位置：相对位置；
z指数：100；
}
#包装机{
位置：绝对位置；
显示：块；
z指数：150；
左：10px；
顶部：10px；
}

您的浏览器不支持视频标记。

您需要添加一个容器

div

，然后将

video

设为子容器，将另一个

div

设为

video

的兄弟容器。然后在父对象上使用相对定位，在子对象上使用绝对定位。像这样：

.container
{
宽度：320px；
高度：240px；
位置：相对位置；
}
.集装箱视频
{
位置：绝对位置；
底部：0；
左：0；
宽度：320px；
高度：240px；
z指数：1！重要；
}
.容器.覆盖层
{
位置：绝对位置；
排名：0；
左：10px；
宽度：100%；
z指数：2；
}
.容器.覆盖层h3
{
字号：1em；
颜色：#fff；
字体大小：粗体；
}

您的浏览器不支持视频标记。
标志

显示的“嘿，先生，谢谢”可能重复，但当我单击全屏时，徽标将被删除：（即使在全屏显示时，如何显示徽标video@obitouchiha我不知道，但之前有人问过：它不起作用，先生：（这个标志不能在全屏上看到。）

<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>

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