Archive for Temmuz, 2010

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();
}

]]>

Reklamlar

26,07,2010 at 22:09 12 yorum

Auto-Update SVN on DreamHost

<![CDATA[I have been using Media Temple Grid Hosting service for a long while and tried to setup my own svn repo settings there but I didnt go so far on using that. I want my online site to be updated on every commit but I understood that MT doesn’t let your site to be updated instantly. You can use cron jobs service but this service will let your web site to be updated in every 5 mins.

So the solution came up with DreamHost. You will be able to update your site instantly and also you will realize that your site will be loaded faster.

Here are the steps to set your svn repo:

1. Go to Domains>Manage Domains and create a sub-domain (or domain) for your SVN repo, create a sub-domain (or domain) for your cgi files and create a domain (or subdomain) for your live site.

svn repo: svn.geryit.net
cgi-files: cgi.geryit.net
live site: goksel.com

2. Go to Goodies>Subversion and create an SVN project.

Project Name & Project ID : gokselcom
Install to: svn.geryit.net/gokselcom
Users : user123 password123

3. Go to Goodies>Htaccess/WebDAV, select your cgi-subdomain you created before (mine is “cgi.geryit.net”), hit “Set Up A New Directory” button and create a password protected folder for your cgi files.

Directory name: : cgi.geryit.net/gokselcom
Password-protect this dir? : check
User accounts for this area: user345 password345

4. Download this rar file, extract it, edit and change the content of the cgi files according to your settings, upload them into your cgi folder (cgi.geryit.net/gokselcom) using an ftp client(I use Cuteftp) and set the CHMOD of these files(.cgi) and folder(gokselcom) to 755 (Cuteftp : Right click to folder/files and select properties).

Note: “geryit” is Dreamhost root username, you should replace your own username there.

5. Upload post-commit file into /svn/gokselcom/hooks in your remote server via ftp and set CHMOD to 755.

6. Now you can login to your repo via Tortoise Svn or some other svn clients and make your first Checkout

SVN Url: svn.geryit.net/gokselcom
user: user123
password: password123

You can visit http://wiki.dreamhost.com/Subversion for more.

]]>

07,07,2010 at 19:25 2 yorum


Takvim

Temmuz 2010
P S Ç P C C P
« Haz   Ağu »
 1234
567891011
12131415161718
19202122232425
262728293031  

Posts by Month

Posts by Category