html5-js-video-manipulation / custom.html

<!DOCTYPE html>
<html>
<head>
<title>hasCode.com 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;
	width:400px;
}
canvas {
	border:1px solid #000;
	height:347px;
	width:400px;
}
div {
	font-size:13px;
	padding:10px 0px;
}
</style>
</head>
<body>
	<h1>hasCode.com: 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="https://github.com/JoelBesada/JSManipulate">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="http://www.hascode.com/2011/07/creating-portlets-with-java-server-faces-2-and-liferay/">this article of mine</a>.</div>
	<div>For the full tutorial, please visit my blog at <a href="http://www.hascode.com/">www.hascode.com</a> - the full sources are available at <a href="https://bitbucket.org/hascode/html5-js-video-manipulation/">Bitbucket</a>.</div>
	<video controls id="video">
		<source src="video.mp4" type="video/mp4" />
	</video>
	<canvas id="canvas"></canvas>
	<hr/>
	<div>2012 Micha Kops / <a href="http://www.hascode.com/">www.hascode.com</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;
    		
    		canvas2DContext.drawImage(video,0,0);
    		var data = canvas2DContext.getImageData(0,0,canvas.width, canvas.height);
    		var converted = data;
    		for(var i=1;i<=data.data.length;i++){
    			if(i % 4 == 0){
    				converted.data[i-1] = 255;
    				continue;
    			}
    			converted.data[i-1] = 255-data.data[i-1];
    		}
    		
    		canvas2DContext.putImageData(converted,0,0);
    		
    		setTimeout(function(){
    			paintCanvas(video,canvas,canvas2DContext);
    		}, 20);
    	}
    	
    	setup();
    </script>
</body>
</html>
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 ProjectModifiedEvent.java.
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.