Html5 视频叠加架构

Question

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

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

注意：我编辑了这个问题，因为它最初指出了关于这里重要的事情的错误方向。我很想有一个解决方案，让它在全屏和所有内容中无缝工作，但重点是：在 html5 中将项目放置在视频顶部的适当方式是什么？

Answer 1

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

但是，您可以做的（我在类似情况下所做的）是实现您自己的视频控件，在没有内置控件的情况下运行视频标签，并享受在上面叠加任意数量的图层的乐趣您现在失焦的视频。

至于全屏，您可以实现某种自定义背景全屏，类似于 here 所做的那样

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

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