Posts filed under ‘Html5’

Normal Mapped Photos using HTML5 Canvas

<![CDATA[

Post Source

Endergen.com

A great work using canvas and jquery

Try It

Source files

I included just CanvasApp.js . Go to website for other files.

function CanvasApp(settings){

	if(settings.seed)
		Math.random(settings.seed);


	// get canvas element
	var	canvas = document.getElementById(settings.element),
		ctx = canvas.getContext("2d"),
		thisApp = this,
		interval = null,
		loopCB = null;

	function loop(){
		loopCB(thisApp);
	}

	this.start  = function(newLoopCB){
		if(interval)
			return false;
		loopCB = newLoopCB;
		interval = setInterval(loop, 1);
		return true;
	}

	this.stop = function(){
		if(interval==NULL)
			return false;
		loopCB = NULL;
		clearInterval(interval);
		interval=null;
		return true;
	}

	// Access

	// Get the canvas associated with this app
	this.canvas = function(){
		return canvas;
	}

	// Get the canvas associated with this app
	this.ctx = function(){
		return canvas;
	}

	// Get the width of the canvas
	this.width = function(){
		return canvas.width;
	}

	// Get the height of the canvas
	this.height = function(){
		return canvas.height;
	}

	// Randomness
	this.randomRange = function(min,max){
		var r = min+(max-min)*Math.random();
		r = Math.min(Math.max(r,min),max);
		return r;
	}
	this.randomRangeInt = function(min,max){
		min = Math.floor(min);
		max = Math.floor(max);
		var r = min+(max-min)*Math.random();
		r = Math.min(Math.max(r,min),max);
		r = Math.floor(r);
		return r;
	}
	this.randomColor = function(){
		var c = thisApp.rgba(
			thisApp.randomRangeInt(0,255),
			thisApp.randomRangeInt(0,255),
			thisApp.randomRangeInt(0,255),
			1.0
		);
		return c;
	}

	// Drawing functions

	// Draw Line
	this.line = function(x0,y0,x1,y1,c){
		ctx.lineWidth = "2";
		ctx.strokeStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";

		ctx.beginPath();
		ctx.moveTo(x0, y0);
		ctx.lineTo(x1, y1);
		ctx.stroke();
		ctx.closePath();
	}
	// Draw Circle
	this.circle = function (x,y,r,c){
		this.ellipse(x,y,r,r,c);

	}
	// Draw Rect
	this.rect = function(l,t,w,h,c){
		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		ctx.fillRect(Math.floor(l), Math.floor(t), Math.floor(w),Math.floor(h));
	}

	// Clear Canvas
	this.clear = function(c){
		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		ctx.fillRect(0, 0, canvas.width, canvas.height);
	}
	// Utility
	this.rgba = function(r,g,b,a){
		return {r:r,g:g,b:b,a:a};
	}

	this.poly = function(p,c){
		if(p.length==0)
			return;
		ctx.beginPath();
		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		for(var i = 0; i<p.length; i++){
			if(i==0)
				ctx.moveTo(p[i][0],p[i][1]);
			ctx.lineTo(p[i][0],p[i][1]);
		}
		ctx.fill();
	}

	this.ellipse = function(x,y,width,height,c){

		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		x = x || 0;
		y = y || 0;

		if (width <= 0 && height <= 0) {
			return;
		}

		ctx.beginPath();

		width *= 2;
		height *= 2;

	      var offsetStart = 0;

	      // Shortcut for drawing a circle
	   //   if (width === height) {
	  //      ctx.arc(x - offsetStart, y - offsetStart, width / 2, 0, Math.PI*2, false);
	    //  } else {
	        var w = width / 2,
	          h = height / 2,
	          C = 0.5522847498307933;
	        var c_x = C * w,
	          c_y = C * h;

	        // TODO: Audit
	        ctx.moveTo(x + w, y);
	        ctx.bezierCurveTo(x + w, y - c_y, x + c_x, y - h, x, y - h);
	        ctx.bezierCurveTo(x - c_x, y - h, x - w, y - c_y, x - w, y);
	        ctx.bezierCurveTo(x - w, y + c_y, x - c_x, y + h, x, y + h);
	        ctx.bezierCurveTo(x + c_x, y + h, x + w, y + c_y, x + w, y);
	    //  }

		var doFill = true;

	      if (doFill) {
	        ctx.fill();
	      }
	    //  if (doStroke) {
	     //   ctx.stroke();
	      //}

	      ctx.closePath();
	}

}

]]>

24,11,2010 at 13:32 Yorum bırakın

SimpleVideo – a jQuery Plugin for Simple HTML5 Video Control

<![CDATA[

Post Source

Plugin Source Files

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 lte8 lte7 lte6"> <![endif]-->
<!--[if IE 7 ]>		 <html class="ie ie7 lte8 lte7"> <![endif]-->
<!--[if IE 8 ]>		 <html class="ie ie8 lte8"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

<head>
	<title>SimpleVideo</title>

	<meta charset="utf-8">

	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />


</head>


<body>

	<video width="853" height="480" poster="poster.png" id="test">
		<source src="trailer_480p.ogg" type="video/ogg">
		<source src="trailer_480p.mov" type="video/mp4">
	</video>
	<p>
		(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
	</p>
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
		google.load("jquery", "1");
	</script>
	<script src="jquery.simplevideo.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {

			$('video').simpleVideo();

		});
	</script>


</body>

</html>
/*
 simpleVideo jQuery plugin
 http://www.viget.com/inspire

 Copyright 2010, Viget Labs
 Licensed under GPL

 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; version 2 of the License.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
*/

(function() {

	$.fn.simpleVideo = function(options) {
		var opts = $.extend({}, $.fn.simpleVideo.defaults, options);
		return this.each(function() {
			var video = this,
				o = $.meta ? $.extend({}, opts, $video.data()) : opts,
				$video = $(this),

				elements = {
					overlay: $(o.overlay),
					video: $video,
					wrapper: $(o.wrapper)
				},
				playing = false,
				playCheck = null;

			function init() {
				if(video.play && typeof(video.play) === "function") {
					$video.wrap(elements.wrapper).before(elements.overlay);
					$video.bind({
						click: function() {
							$video.trigger("toggle");
						},
						pause: function() {
							pause();
						},
						play: function() {
							play();
						},
						stop: function() {
							stop();
						},
						toggle: function() {
							if(isPlaying()) {
								pause();
							} else {
								play();
							}
						}
					});
					elements.overlay.bind({
						click: function() {
							$video.trigger("toggle");
						}
					});
				} else {
					if(o.isNotSupported && typeof(o.isNotSupported) === "function")
						o.isNotSupported();
				}
			};

			function play() {
				video.play();
				pingVideo();
				if(o.onPlay && typeof(o.onPlay) === "function")
					o.onPlay(elements);
			};

			function pause() {
				video.pause();
				endPing();
				if(o.onPause && typeof(o.onPause) === "function")
					o.onPause(elements);
			};

			function stop() {
				video.pause();
				if(o.onStop && typeof(o.onStop) === "function")
					o.onStop(elements);
			}

			function isPlaying() {
				if(video.paused || video.ended) {
					return false;
				}
				return true;
			};

			function pingVideo() {
				playing = true;
				playCheck = setInterval(function() {
					if(isPlaying()) {
						return;
					}
					endPing();
				}, 1000);
			};

			function endPing() {
				playing = false;
				clearInterval(playCheck);
				o.onStop(elements);
			};

			init();
		});
	};

	$.fn.simpleVideo.defaults = {
		isNotSupported: function() {},
		onPause: function(elements) {
			elements.overlay.fadeIn();
		},
		onPlay: function(elements) {
			elements.overlay.fadeOut();
		},
		onStop: function(elements) {
			elements.overlay.fadeIn();
		},
		overlay: '<span class="simple-video-overlay"></span>',
		wrapper: '<div class="simple-video-wrapper"></div>'
	};

})(jQuery);
body {
	background: #ccc;
	padding: 50px;
}

.simple-video-wrapper {
	box-shadow: 0 5px 15px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 5px 15px rgba(0,0,0,0.4);
	height: 480px;
	margin: 0 auto;
	position: relative;
	width: 853px;

}

.simple-video-overlay {
	background: rgba(0,0,0,0.4) url(button.png) 50% 50% no-repeat;
	cursor: pointer;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}

Plugin DemoDownload the Plugin]]>

20,11,2010 at 14:25 Yorum bırakın

UX experiment – An alternative way for a user to pass data between web sites

<![CDATA[

Post Source

7 minute walk through of the idea…

http://draggables.com/player.swf

Having observed users connect sites using OAuth without really understanding what exchange of data had taken place I decided to investigate other metaphors/conventions that might be more transparent. Draggables is a series of demos that explore the use of drag and drop to directly exchange data between web sites.

]]>

19,11,2010 at 17:17 Yorum bırakın

A very simple Canvas and JQuery application

<![CDATA[My first canvas-jquery sample. Hope to create a simple html5 game and publish soon.

/lib/canvas_gallery/

<html>
	<head>
		<link rel="stylesheet" href="draw.css" />
	</head>
	<body onload="draw()">
		<img id="frame" src="images/picture_frame.png" />
		<ul>
			<li>
				<img src="images/gallery_1.jpg" />
			</li>
			<li>
				<img src="images/gallery_2.jpg" />
			</li>
			<li>
				<img src="images/gallery_3.jpg" />
			</li>
			<li>
				<img src="images/gallery_4.jpg" />
			</li>
			<li>
				<img src="images/gallery_5.jpg" />
			</li>
		</ul>
                <script src="jquery-1.4.4.min.js"></script>
                <script src="draw.js"></script>
	</body>
</html>
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

li {
	float: left;
	margin: 0 10px 10px 0;
}

img {
	display: none;
}
function draw(){
	$("li").each(function(){
		$(this).append("<canvas width='100' height='115' />");
		var ctx = $("canvas", this)[0].getContext('2d');
		ctx.drawImage($("img", this)[0], 0, 0);
		ctx.drawImage($("#frame")[0], -3, -3, 108, 124);
	})
}

]]>

13,11,2010 at 20:42 Yorum bırakın

HTML/CSS/JS – Best Practices and Optimization Techniques

<![CDATA[

]]>

31,10,2010 at 12:07 Yorum bırakın

Custom Html5 Video Player with HD option

<![CDATA[I have been looking for an Html5 Player for mindwork3d project but could not find one with HD option. Finally I decided to add that by myself to my player.

First thing I did was to find a cool player skin. I found a vimeo skin on http://videojs.com/skins.html and downloaded zip version . Then added a custom css file for HD button on the player. Finally added javascript functions for HD property.

http://www.goksel.se/lib/html5player/

DEMO DOWNLOAD SOURCE FILES

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/video-js.css"/>
<link rel="stylesheet" href="css/vim.css"/>
<link rel="stylesheet" href="css/hd.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript" src="js/hd.js"></script>

<style type="text/css">
</style>
<title>video</title>
</head>

<body onLoad="ready();">

<div id="video_holder">Loading Video...</div>

</body>
</html>
<?
$quality = $_POST["quality"];
if($quality=="sd"){
	$src = "415x205";
	if(strpos($_SERVER['HTTP_USER_AGENT'],"iPhone") || strpos($_SERVER['HTTP_USER_AGENT'],"iPod")) $src = "640x480";
	?>
	<div class="video-js-box vim-css"><video class="video-js" width="415" height="205" controls preload><source src="/video/415x205.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="/video/<?=$src;?>.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video></div>
<? }else{?>
    <div class="video-js-box vim-css"><video class="video-js" width="415" height="205" controls preload><source src="/video/640x316.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="/video/640x480.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video></div>
<? }?>
.video-js-box{}
.video-js-box ul{float:none;}
.vjs-controls{padding-left:50px!important;padding-right:175px!important;}
.vjs-controls>li{font-size:10px!important;}
.vjs-controls>li>span{font-family:Georgia, "Times New Roman", Times, serif!important;}
.vjs-play-control{width:32px!important;height:32px!important;border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;bottom:10px!important;}
.vjs-play-control:hover{background:#0066ff!important;}
.vjs-play span{border-top-width:7px!important;border-left-width:7px!important;border-bottom-width:7px!important;margin:9px 0 0 13px!important;}
.vjs-pause span{width:2px!important;height:14px!important;margin:9px 0 0 10px!important;}
.vjs-progress-control,.vjs-progress-holder,.vjs-play-progress,.vjs-load-progress,.vjs-fullscreen-control{border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;}
.vjs-progress-holder{margin-right:10px!important;}
.vjs-progress-control .vjs-play-progress{background:#0066ff!important;}
.vjs-time-control{width:70px!important;right:105px!important;}
.vjs-volume-control{right:70px!important;width:35px!important;}
.vjs-volume-control ul{margin-left:0!important;}
.vjs-volume-control ul .vjs-volume-level-on{border-color:#0066ff!important;}
.vjs-fullscreen-control{width:20px!important;right:40px!important;padding:0 2px 0 8px!important;}
.vim-css .vjs-fullscreen-control:hover ul li:nth-child(3), .vim-css .vjs-fullscreen-control:hover ul li:nth-child(4), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(1), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(2){border-bottom-color:#0066ff!important;}
.vim-css .vjs-fullscreen-control:hover ul li:nth-child(1), .vim-css .vjs-fullscreen-control:hover ul li:nth-child(2), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(3), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(4){border-top-color:#0066ff!important;}
.vjs-hd-control{width:25px!important;right:10px;line-height:32px;padding-right:5px!important;font-size:11px!important;cursor:pointer!important;}
.vjs-hd-control span{display:block!important;width:20px!important;height:12px!important;float:left;color:#fff;margin-top:0px;font-weight:bold;font-size:14px;}
.vjs-hd-control span:hover{color:#0066ff;}
.vjs-hd-control .hd_on{color:#0066ff;}
function ready(){
	load_showreel("sd");
}

function load_showreel(quality){
	$('#video_holder').html("Loading Video...");
	$('#video_holder').show();
	$.ajax({
		type: "POST",
		url: "video.php",
		data: "quality="+quality,
		success: function(msg){
			$('#video_holder').html(msg);
			VideoJS.setup();
			$(".vjs-controls").append('<li class="vjs-hd-control" title="Switch to High Definition"><span>HD</span></li>');

			var hd = $(".vjs-hd-control span");
			if(quality=="sd"){
				hd.removeClass("hd_on");hd.attr("title","Switch to High Definition");
			}else{
				hd.addClass("hd_on");hd.attr("title","Switch to Low Definition");
			}

			$(".vjs-hd-control").click(function(){pauseVideo();if(quality=="sd") load_showreel("hd"); else load_showreel("sd");});
			$(".vjs-fullscreen-control").attr("title","Fullscreen/Standart View");
			if(window.played_before) playVideo();
			window.played_before=1;
		}
	});
}

function playVideo(){
	v = $("video")[0];
	v.play();
}

function pauseVideo(hide){
		v = $("video")[0];
		v.src="";
		v.load();
		v.pause();
}

]]>

26,07,2010 at 22:09 12 yorum

Html5 OGG&OGV Video Converter for Windows

<![CDATA[After spending 2 hours I finally found a working converter for my Html5 website. As you know OGG(Open Video Format – Theora) or OGV video formats work well with Firefox (pc&mac) but it is hard to find a OGV/OGG converter. Lucky that I found a good one. You have to use Command Prompt but it worths.

Now visit this page and download ffmpeg2theora to your pc and go to here to see how to convert your videos. Good luck!

I also found a perfect plugin for firefox 3.5 : firefogg.

Visit here if you don’t like hand coding.]]>

28,06,2010 at 2:22 Yorum bırakın

Eski Yazılar


Takvim

Ağustos 2017
P S Ç P C C P
« Ara    
 123456
78910111213
14151617181920
21222324252627
28293031  

Posts by Month

Posts by Category