Question

我的目标是在每个视频元素上添加文本（其中有许多视频元素）。视频正在显示，但内部的div不显示。

<video autoplay playsinline style="transform: rotate(0deg); width: 100%; height: 100%; position: relative">
  <div style="width: 100px; height: 30px; color: white; z-index: 1; position: absolute; top: 0px; left: 0px; background: green;">test</div>
</video>

在元素检查器中，当我将鼠标悬停在div上时，它不会在页面上的任何位置显示框。如何让它出现？

Answer 1

视频元素不能包含内部元素，除非不支持video标记。通常的做法是显示错误消息，说明浏览器不支持video。

将您的video置于元素内（例如div）并在其旁边添加div，作为video元素的兄弟，而不是孩子。使用position将其放入：

＆＃13;

<div style="position: relative;">
  <video autoplay playsinline style="transform: rotate(0deg); width: 100%; height: 100%; position: relative"></video>
  <div style="width: 100px; height: 30px; color: white; z-index: 1; position: absolute; top: 0px; left: 0px; background: green;">test</div>
</div>

＆＃13;

请务必发布完整的代码，以确保我们能够为您提供正确的帮助。

在视频元素中添加子div，而不显示

1 个答案: