HTML5视频：可以将常规HTML内容放在视频上

Question

只是想知道是否有人知道如何获取常规html内容（主要是img标签）以显示在视频之上（通过视频标签）？

Answer 1

正如其他人所暗示的那样，使用绝对定位将HTML元素置于VIDEO元素之上非常容易。当您尝试在iPhone，iPod以及可能不在页面上内嵌视频资源的较旧Android手机上捕获事件时（而不是在瘦本机回放客户端中），因此遇到了挑战，因为在这些情况下{{{ 1}}元素贪婪地捕获事件。

如果您使用VIDEO元素或IMAGE并将其DIV设置为您要用作“海报”或“缩略图”的图片，则您的用户不会能够点击它们让视频开始播放 - 移动浏览器会将此行为视为在该空间中只存在background-image元素（如果碰巧点击中间的“如果你有一个不在中间的自定义控件，那么大玩“按钮不是很有帮助。

我过去使用的解决方案是将VIDEO或IMG海报放在您通常放置DIV元素的页面上并移动{{1元素offscreen（绝对定位，VIDEO样式设置为-3000px），因此它不再能够囤积这些事件。

我知道这并不是所要求的，但希望这些信息对某人有用。

Answer 2

你可以简单地将HTML元素放在HTML5视频之上，将它们绝对放在视频的顶部。给视频元素和HTML元素一个“position：absolute”，并将HTML元素的z-index放在比视频元素更高的位置。

Answer 3

为什么不使用海报属性？这样，您可以在加载或播放视频之前显示图像。

Answer 4

您可以将视频设置为该div的背景吗？不确定它是否适用于您的布局，但似乎合乎逻辑......