html5-js-video-manipulation / custom.html

<!DOCTYPE html>
<title> HTML Canvas Video Manipulation Example</title>
<style type="text/css">
h1 {
	border-bottom: 6px solid #000

body {
	font-family: Monospace, sans-serif;
video {
	border:1px solid #000;
canvas {
	border:1px solid #000;
div {
	padding:10px 0px;
	<h1> Video Manipulations using HTML 5 and JavaScript / Custom Animation</h1>
	<div>Please run using Chrome .. I was too lazy to add other video formats here. .. the image effect are made with JSManipulate by <a href="">Joel Besada</a>.</div>
	<div>I've used the screencast from my Liferay-Portlet tutorial here - if you're interested in the tutorial please feel free to take a look at <a href="">this article of mine</a>.</div>
	<div>For the full tutorial, please visit my blog at <a href=""></a> - the full sources are available at <a href="">Bitbucket</a>.</div>
	<video controls id="video">
		<source src="video.mp4" type="video/mp4" />
	<canvas id="canvas"></canvas>
	<div>2012 Micha Kops / <a href=""></a></div>

	<script type="text/javascript">
    	function setup(){
    		var video = document.getElementById("video");
    		var canvas = document.getElementById("canvas");
    		var canvas2DContext = canvas.getContext("2d");
    		video.addEventListener("play", function(){
    			canvas.height = video.clientHeight;
    			canvas.width = video.clientWidth;
    			paintCanvas(video, canvas, canvas2DContext);
    		}, false);
    	function paintCanvas(video, canvas, canvas2DContext){
    		if(video.paused || video.ended) return false;
    		var data = canvas2DContext.getImageData(0,0,canvas.width, canvas.height);
    		var converted = data;
    		for(var i=1;i<;i++){
    			if(i % 4 == 0){[i-1] = 255;
    			}[i-1] =[i-1];
    		}, 20);
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.