Html5 视频叠加架构

Question

我想创建一个带有视频和图像叠加层的 html5 页面 - 意思是在视频上显示一些图像。在某些情况下，该叠加层及时也会是文本。有什么好的方法可以实现这一目标吗？

到目前为止，我一直在尝试使用 <video>标记来保存视频，并将图像绘制到 Canvas 中，我将其放在视频的顶部。为了显示它，我需要将视频移回设置 z-index 为 -1，但视频控件将无法工作。也许有一个解决方案可以让控件再次工作，但我不确定我是否走在正确的道路上。我假设有一个推荐的解决方案。也许使用我将视频和叠加层填充到其中的 Canvas 。或者完全不同的东西？

注意:我编辑了这个问题，因为它最初指向错误的方向关于这里的重要内容。我希望有一个解决方案可以让这项工作在全屏和所有情况下无缝运行，但重点是:在 html5 中将项目放置在视频顶部的合适方法是什么？

Answer 1

实现您想要的并在开箱即用的全屏中支持它是有问题的。 html5 视频中的全屏支持只是可选的，并且无法通过 API ( See discussion here) 以任何方式访问。即使您使用内置的全屏，也无法在其上方插入内容，除非您愿意在运行时更改服务器上的视频文件本身。

然而，您可以做的(以及我在类似情况下所做的)是实现您自己的视频控件，在没有内置控件的情况下运行视频标签，并享受在上面叠加任意多个图层的乐趣您现在失焦的视频。

至于全屏，您可以实现某种类似于已完成的自定义背景全屏here

编辑:您在视频上放置 Canvas 时遇到的问题是阻止了内置的 html 视频控件。我的建议是使用调用视频 API 的 html 和 javascript 实现您自己的视频控件(播放、暂停、音量、搜索器等)。你甚至可以让它比丑陋的内置控件更漂亮。您的控件可以包含在叠加 Canvas 上方的层中，因此将显示视频，在其上方是叠加层，在其上方是您的控件集。

您可以阅读一些关于实现您自己的控件的内容 here或 here无论如何，这很容易比这好得多。