镜像视频作为背景而无需双缓冲?

时间:2016-05-31 00:32:37

标签: javascript jquery html5 video

我的网站显示了一个视频,这是它的主要功能。我想知道,我可以使用相同的视频,最好不加载两次,并将其用作网站其他部分的背景(可能具有模糊效果)吗?

_________________
|    <html>     |
|     _____     |
|    <video>    |
|    </video>   |
|               |
| Same <video>  |
| as background |
|               |
|    </html>    |
|_______________|

我知道这个解释得非常糟糕,但我不知道从哪里开始。我认为jQuery听起来像一个合适的标签,但我甚至不确定。我知道人们通常会联系他们尝试过的东西,但我不知道从哪里开始。正如我所说,我非常希望不必缓冲两次,这在我的世界中意味着不添加另一个<video>元素,而是使用某种j来以某种方式反映它。一个插件,也许?

任何形式的指导都将非常感谢,提前感谢。

1 个答案:

答案 0 :(得分:2)

您可以使用CFWriteStream timeupdate事件使用video绘制videocanvas元素的图像;使用drawImage() cssvw值设置vh以覆盖视口,将canvas设置为position absolutevideo {1}}元素,canvas属性filter值设置blur()的模糊效果,将canvas的{​​{1}}设置为小于z-Index的值} canvas元素。

z-Index
video