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 w
Solution 1:
You can use timeupdate event of video to draw image of video to canvas element using drawImage(); use cssvw, 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><videowidth="300px"height="200px;"src="http://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm"autoplayloop></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>
Post a Comment for "Mirror Playing Video As Background Without Double Buffering?"