Html5视频叠加架构 [英] Html5 video overlay architecture
问题描述
我想创建一个带有视频和图片叠加层的html5页面 - 意味着通过视频显示的一些图片。在某些情况下，这个叠加层也会成为文本。有没有什么好的方法来实现这一目标？
我一直在尝试的是使用< video> 标签来保存视频，并将图像绘制成一个放置在视频顶部的画布。为了显示它，我需要将视频移回设置z-index为-1，但是然后视频控制将不起作用。也许有一个解决方案可以让控件再次运行，但我不确定我是否在正确的道路上。我假设有一个推荐的解决方案。也许使用我填写视频和覆盖图的画布。或者完全不同的东西？
注意：我将问题编辑为最初指向错误方向的问题，我很想有一个解决方案，它可以在全屏和一切方面无缝工作，但重点是：什么是将项目放置在视频顶部的适当方式 - 在html5中
实现你想要的功能并且在开箱即用的全屏中支持它是有问题的。在HTML5视频中的全屏支持只是可选的，并且以任何方式不能通过API访问（请参阅此处的讨论）。
即使您使用全屏内置，您也无法在其上面注入内容，除非您愿意在运行时更改服务器上的视频文件。
然而，你可以做什么（和我在类似情况下做的一样）是实现你自己的视频控件，运行视频标签，而不需要内置控件，并且可以随意堆叠任意数量的图层您现在焦点不在的视频。
至于全屏，您可以实现某种自定义背景全屏，类似于已完成的操作这里 编辑通过在视频上放置画布阻止内置的html视频控件。我的建议是使用html和javascript调用视频API来实现您自己的视频控件（播放，暂停，音量，导引等）。你甚至可以使它更漂亮，然后是内置的控制器。
您的控件可以包含在叠加画布上方的一个图层中，因此视频将显示在其上方，覆盖图上方并位于控件集上方。
你可以阅读一些关于实现你自己的控件 here 或 here
无论如何，这可以很容易比这更好。
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?
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.
这篇关于Html5视频叠加架构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
