Html5 视频叠加架构
我想创建一个带有视频和图像叠加层的 html5 页面 - 意思是在视频上显示一些图像。在某些情况下，该覆盖层最终也将是文本。有什么好的方法可以达到这个目的吗？
到目前为止，我一直在尝试使用 标签来保存视频，并将图像绘制到画布中，并将其放置在视频顶部。为了显示它，我需要将视频向后移动，将 z-index 设置为 -1，但视频控件将不起作用。也许有一个解决方案可以使控件再次工作，但我不确定我是否走在正确的道路上。我假设有一个推荐的解决方案。也许使用我填充视频和叠加层的画布。或者完全不同的东西？
注意：我编辑了这个问题，因为它最初指出了关于这里重要内容的错误方向。我希望有一个解决方案，使其能够在全屏和所有内容中无缝工作，但重点是：在 html5 中将项目放置在视频顶部的适当方法是什么？
I want to create a html5 page with video and an image overlay - meaning some image that is showing over the video. This overlay will in time also be text in some cases. Is there any good way to achieve this?
What I've been trying this far is to use a <video> tag to hold the video, and draw the image into a canvas, which I place on top of the video. To show it I need to move the video back setting z-index to -1, but then the video controls won't work. Maybe there's a solution to make the controls work again, but I'm not sure if I'm on the right path here.. I am assuming there is a recommended solution to this. Maybe using a canvas which I fill both video and overlay into. Or something completely different?
Note: I edited the question as it originally pointed in the wrong direction regarding what was important here. I'd love to have a solution which makes this work seamlessly in fullscreen and everything, but the focus is: What is the appropriate way to place items on top of video - in html5?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
实现您想要的并在开箱即用的全屏中支持它是有问题的。 html5 视频中的全屏支持只是可选的，并且无论如何都无法通过 API 访问（请参阅此处的讨论）。
即使您使用内置的全屏，也无法在其上方注入内容，除非您愿意在运行时更改服务器上的视频文件本身。
然而，你可以做的（以及我在类似情况下所做的）是实现你自己的视频控件，在没有内置控件的情况下运行视频标签，并在你现在的内容之上叠加尽可能多的层，并享受乐趣的焦点视频。
至于全屏，您可以实现某种自定义背景全屏，类似于此处所做的事情
编辑：在视频上放置画布时遇到的问题是阻止内置的 html 视频控件。我的建议是使用 html 和 javascript 调用视频 API 来实现您自己的视频控件（播放、暂停、音量、搜索器等）。你甚至可以让它比丑陋的内置控件更漂亮。
您的控件可以包含在覆盖画布上方的图层中，因此将显示视频，其上方是覆盖层，上方是您的控件集。
您可以阅读一些有关实现自己的控件的信息 此处 或此处
无论如何，这很容易比这更好。
Achieving what you want and have it supported in out-of-the-box fullscreen is problematic. Fullscreen support in html5 video is only optional and in any way not accesible thorugh the API (See discussion here).
Even if you used the built in fullscreen there is no way you could inject content above it unless you are willing to change the video file itself on the server in runtime.
what you can do however (And what I did in a similar case) is to implement your own video controls, run the video tag without the built in controls, and have fun with overlaying as many layers as you want on top of your now out of focus video.
As for fullscreen, you can implement some sort of custom background fullscreen similar to what's been done here
edit: The problem you're having by placing a canvas over the video is blocking the built in html video controls. My suggestion is to implement your own video controls (play, pause, volume, seeker, etc.) using html and javascript calling the video API. You can probably even make it prettier then the ugly built in controls.
Your controls can be contained in a layer above the overlaid canvas, and thus the video will be shown, above it the overlay and above it your control set.
You can read a little about implementing your own controls here or here
And anyway this can easily be much better than this.