sti*_*k81 1 html video html5 overlay
我想创建一个带有视频和图像叠加层的html5页面 - 这意味着某些图像会显示在视频上.在某些情况下,此叠加层也将及时成为文本.有没有什么好办法实现这个目标？
到目前为止,我一直在尝试使用<video>标签来保存视频,并将图像绘制到画布中,然后放在视频的顶部.要显示它我需要将视频移回设置z-index为-1,但视频控件将无法工作.也许有一个解决方案让控件再次工作,但我不确定我是否在这里正确的道路上......我假设有一个推荐的解决方案.也许使用我填充视频和叠加的画布.还是完全不同的东西？
注意:我编辑了这个问题,因为它最初指向了错误的方向,关于这里重要的事情.我希望有一个解决方案可以让它在全屏和所有内容中无缝地工作,但重点是:在html5中放置项目的适当方式是什么？
实现您想要的并在开箱即用的全屏幕中支持它是有问题的.html5视频中的全屏支持仅是可选的,并且无论如何都无法通过API访问(请参阅此处的讨论).即使您使用内置全屏,也无法在其上方注入内容,除非您愿意在运行时更改服务器上的视频文件本身.
然而你能做什么(以及我在类似情况下所做的)是实现你自己的视频控件,运行没有内置控件的视频标签,并且可以在你现在的基础上覆盖任意数量的图层.焦点视频
至于全屏,您可以实现某种类似于此处所做的自定义背景全屏
编辑:在视频上放置画布时遇到的问题是阻止内置的html视频控件.我的建议是使用html和javascript调用视频API来实现自己的视频控件(播放,暂停,音量,搜索器等).你甚至可以让它比丑陋的内置控件更漂亮.您的控件可以包含在叠加画布上方的图层中,因此视频将显示在其上方,叠加层和控件集上方.
你可以在这里或这里阅读一些关于实现你自己的控件的内容 .无论如何,这可以比这更好.