HTML5视频：可以将常规HTML内容放在视频上 [英] HTML5 video: possible to place regular html content over video

问题描述

只是想知道是否有人知道获取常规html内容（主要是img标签）以显示在视频顶部（通过视频标签）的任何技巧？

Just wondering if anyone knows any tricks to getting regular html content (mainly an img tag) to display on top of a video (via the video tag)?

推荐答案

正如其他人所暗示的那样，使用绝对定位很容易将HTML元素定位在 VIDEO 元素的顶部。当您尝试在iPhone，iPod和可能较旧的Android手机上捕获事件时，会遇到挑战，因为在这些情况下，<<$不会在页面上内联播放视频资产（而不是在瘦本地回放客户端中） c $ c> VIDEO 元素贪婪地捕获事件。

As others have intimated it's very easy to position HTML elements on top of VIDEO elements using absolute positioning. The challenge comes when you try to capture events on them in the iPhone, iPod and possibly older Android phones that don't play video assets inline on the page (as opposed to in a thin native playback client) since in those instances the VIDEO element greedily captures events.

如果您使用 IMAGE 元素或 DIV 及其 background-image 设置为您要用作海报或缩略图，那么你的用户将无法点击它们来让视频开始播放 - 手机浏览器会将此行为看作只有 VIDEO 元素存在于那个空间（如果碰巧点击大玩按钮的中间位置很好，但是如果你有一个不在中间的自定义控件那么没用。

If you use an IMAGE element or a DIV with its background-image set to an image you want to use as a "poster" or "thumbnail" then your users won't be able to tap on them to get the video to start playing -- the mobile browser will treat this behavior as if nothing but the VIDEO element exists in that space (good if you happen to click in the middle where the "big play" button is but not so helpful if you, say, have a custom control not in the middle.

我过去使用的解决方案是将 IMG 或 DIV 海报放在通常放置 VIDEO 元素并将 VIDEO 元素移出屏幕（绝对定位左样式设置为-3000px）所以它不能再囤积这些事件。

The solution I've used in the past is to just put the IMG or DIV poster on the page where you would normally put the VIDEO element and shift the VIDEO element offscreen (absolutely positioned with left style set to, say, -3000px) so it can no longer hoard those events.

我知道这并不是什么问题，但希望这些信息对某人有用。

I know this isn't exactly what was asked, but hopefully this information will prove useful to someone.

这篇关于HTML5视频：可以将常规HTML内容放在视频上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！