March Madness 5 – Video Scrolly

A quick and simple scroller for today’s entry. The letters NYCR scroll by to reveal a video playing behind it. Because of the cross-site scripting security restrictions imposed on the canvas tag I couldn’t make this as interesting as I wanted to. I did however get to play with the globalCompositeOperation attribute. Source after the break.

// CC video courtesy of VernissageTV (http://blip.tv/file/3303371)

JPLT.Class.create("JPLT.RandomVideoRandomness", JPLT.Object,
	function() {
		this.width = window.innerWidth / 2;
		this.height = window.innerHeight / 2;
		this.ogvUrl = "http://blip.tv/file/get/Potatono-VideoForMarchMadness05478.ogv?showplayer=2009.12.21.1,257";
		this.m4vUrl = "http://blip.tv/file/get/Potatono-VideoForMarchMadness05239.m4v?showplayer=2009.12.21.1,257";
		this.createElements();
		this.x = this.width + 100;
		this.timer = window.setInterval(this.delegate(this.paint),10);
	},
	
	{
		createElements: function() {
			this.canvas = document.createElement("canvas");
			this.canvas.width = this.width;
			this.canvas.height = this.height;
			this.canvas.style.position = "absolute";
			this.canvas.style.top = this.height / 2;
			this.canvas.style.left = this.width / 2;
			this.canvas.style.border = "1px solid #ccc";
			this.canvas.style.zIndex = "10";
			
			this.video = document.createElement("video");
			this.video.autoplay = true;
			this.video.volume = 0;
			this.video.muted = true;
			this.video.loop = true;
			this.video.width = this.width;
			this.video.height = this.height;
			this.video.style.position = "absolute";
			this.video.style.top = this.height / 2;
			this.video.style.left = this.width / 2;
			this.video.style.zIndex = "9";
			
			var ogv = document.createElement("source");
			ogv.src = this.ogvUrl;
			ogv.type = "video/ogg";
			this.video.appendChild(ogv);
			
			var m4v = document.createElement("source");
			m4v.src = this.m4vUrl;
			m4v.type = "video/mp4";
			this.video.appendChild(m4v);
			
			var body = document.documentElement || document.body;
			body.appendChild(this.canvas);
			body.appendChild(this.video);			
		},
		
		context: function() {
			var ctx = this.canvas.getContext("2d");
			
			return ctx;
		},
		
		paint: function() {
			var ctx = this.context();

			try {				
				ctx.globalCompositeOperation = "source-over";
				ctx.fillStyle = "black";
				ctx.fillRect(0,0,this.width,this.height);
			
				ctx.globalCompositeOperation = "xor";
				ctx.font = "bold 200px sans-serif";
				ctx.fillStyle = "rgba(255,255,255,0.3)";
				ctx.fillText("NYCR",this.x,this.height/2+80);
				
				this.x-=3;
				if (this.x<-600) {
					this.x = this.width+100;
				}
			} 
			catch (e) {
				window.clearInterval(this.timer);
			}
		}
	}
)