镜像播放视频作为背景没有双缓冲？ [英] Mirror playing video as background without double buffering?
问题描述
我的网站显示了一个视频，这是它的主要功能。我想知道，我可以使用相同的视频，最好不加载两次，并将其用作网站其他部分的背景（可能具有模糊效果）吗？
My website shows a video, that's sort of the main thing it does. I wonder, can I use the very same video, preferrably without loading it twice and use it as a background (perhaps with a blurred effect) on the rest of the site?
_________________
| <html> |
| _____ |
| <video> |
| </video> |
| |
| Same <video> |
| as background |
| |
| </html> |
|_______________|
我知道这个解释得非常糟糕，但我不知道从哪里开始。我认为jQuery听起来像一个合适的标签，但我甚至不确定。我知道通常会链接他们尝试过的东西，但我不知道从哪里开始。正如我所说，我非常希望不必缓冲它两次，这在我的世界中意味着不添加另一个< video> 元素，但使用某种js以某种方式反映它。一个插件，也许？
I know this is ridiculously poorly explained, but I don't know where to start. I figured jQuery sounded like an appropriate tag, but I'm not even sure about that. I know one would normally link what they've tried, but I don't know where to start. As I said, I'd very much prefer not having to buffer it twice, which in my world means not adding another <video> element, but using some sort of js to reflect it somehow. A plugin, perhaps?
任何形式的指导都会非常感谢，提前感谢。
Any sort of guidance would be much appreciated, thanks in advance.
推荐答案
您可以使用 timeupdate 事件>视频使用 drawImage将;使用 video 的图像绘制到 canvas 元素（） css vw ， vh 设置值 canvas 覆盖视口，将位置设置为绝对两者视频和 canvas 元素，过滤器属性 blur（）设置 canvas 的模糊效果的值，设置 z-Index 的 canvas 的值小于 z-Index 的 video 元素。
You can use timeupdate event of video to draw image of video to canvas element using drawImage(); use css vw, vh values to set canvas to cover viewport, set position to absolute at both video and canvas elements, filter property with blur() value to set blur effect of canvas, set z-Index of canvas to value less than z-Index of video element.
body {
width: 94vw;
height: 100vw;
}
video {
position: absolute;
z-Index: 1;
left: 25vw;
}
canvas {
width: 94vw;
height: 100vh;
position: absolute;
z-Index: 0;
-webkit-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
<!DOCTYPE html>
<html>
<body>
<video width="300px" height="200px;" src="http://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm" autoplay loop></video>
<canvas></canvas>
<script>
window.onload = function() {
var video = document.querySelector("video");
var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d");
video.addEventListener("timeupdate", function(event) {
ctx.drawImage(this, 0, 0);
})
}
</script>
</body>
</html>
这篇关于镜像播放视频作为背景没有双缓冲？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
