<video class="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop"> <source src="http://mazwai.com/system/posts/videos/000/000/123/original/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.mp4?1412890624" type="video/mp4"> <source src="http://mazwai.com/system/posts/videos/000/000/123/webm/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.webm?1412890624" type="video/webm"> </video> <img class='mask' src='https://i.imgur.com/mXHUGrT.png' style='display:none;'/> <canvas class='canvas' width='1280' height='720'></canvas>
// Get our mask image var canvas = document.querySelector(".canvas"); var mask = document.querySelector(".mask"); var video = document.querySelector(".video"); var ctx = canvas.getContext('2d'); function drawMaskedVideo() { ctx.save(); ctx.filter='blur(10px)'; // Draw the video feed ctx.drawImage(video, 0, 0); // Set the composite operation, which is responsible for masking // see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html ctx.globalCompositeOperation = 'destination-in'; // Apply the mask //ctx.drawImage(mask, 0, 0); ctx.filter='blur(0px)'; ctx.drawImage(mask, 250, 200); ctx.restore(); } requestAnimationFrame(function loop() { drawMaskedVideo(); requestAnimationFrame(loop.bind(this)); });
html, body { margin: 0 auto; } .video, .canvas { width: 100%; } .canvas { position: absolute; top: 0; left: 0; }