<div class="canvas" name="Video">
<video id="butterfly.mp4" src="butterfly.mp4" width="180" height="320" controls></video>
<canvas id="Video" width="180" height="320"></canvas>
<script id="Video.js">
// https://www.pexels.com/video/a-brown-butterfly-on-a-flower-6701932/
(function(){
	var canvas    = document.getElementById('Video');
	var ctx       = canvas.getContext('2d');
	var video     = document.getElementById("butterfly.mp4");

	var id = 0;
	video.addEventListener('play',function(){if (!id) id = requestAnimationFrame(draw, canvas);});
	video.addEventListener('pause',function(){cancelAnimationFrame(id); id = 0;});
	video.addEventListener('ended',function(){cancelAnimationFrame(id); id = 0;});

	function draw() {
		id = requestAnimationFrame(draw, canvas);
		var w      = canvas.width  = video.videoWidth;
		var h      = canvas.height = video.videoHeight;
		ctx.drawImage(video, 0, 0);
		var imgdt  = ctx.getImageData(0, 0, w, h);
		var a      = imgdt.data;
		for (var k=0; k<a.length; k+=4) {
			var [h,s,l] = rgb2hsl(a[k], a[k+1], a[k+2]);
			h += 0.85; if (h >= 1) h -= 1;
			var [r,g,b] = hsl2rgb(h,s,l);
			a[k  ] = r;
			a[k+1] = g;
			a[k+2] = b;
			a[k+3] = 255;
		}
		ctx.putImageData(imgdt, 0, 0);
	}

	function rgb2hsl(r, g, b) {
		r /= 255; g /= 255; b /= 255;	// prevent integer overflow
		var max = Math.max(r, g, b);
		var min = Math.min(r, g, b);
		var a = max + min;
		var d = max - min;
		var l = a / 2;
		var s = a > 1 ? d / (2 - a) : d / a;
		var h;
		if      (max == r) h = (g - b) / d + (g < b ? 6 : 0);
		else if (max == g) h = (b - r) / d + 2;
		else if (max == b) h = (r - g) / d + 4;
		h /= 6;
		return [h, s, l];
	}

	function hsl2rgb(h, s, l) {
		h *= 6;
		var c = (1 - Math.abs((2 * l) - 1)) * s;
		var x = c * (1 - Math.abs((h % 2) - 1));

		if      (h < 1) {r = c; g = x; b = 0;}
		else if (h < 2) {r = x; g = c; b = 0;}
		else if (h < 3) {r = 0; g = c; b = x;}
		else if (h < 4) {r = 0; g = x; b = c;}
		else if (h < 5) {r = x; g = 0; b = c;}
		else            {r = c; g = 0; b = x;}

		var m = l - c / 2;
		var r = Math.round((r + m) * 255);
		var g = Math.round((g + m) * 255);
		var b = Math.round((b + m) * 255);
		return [r, g, b];
	}
})();
</script>
</div>