Posts filed under ‘Video’

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]]>

Reklamlar

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

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

Guitar Hero 5 Director's Cut Music Steve Trailer

<![CDATA[This is the Director’s Cut to the Guitar Hero® 5 Music Steve video. Special Thanks to ‘Make The Girl Dance’ for use of the song ‘Baby Baby Baby’

http://www.youtube.com/v/9uDrFEXcg_A&hl=en_US&fs=1&]]>

05,05,2010 at 9:34 Yorum bırakın

Missed Ipad with just two days

<![CDATA[
During my stay in San Francisco, I was planning to buy an Apple Ipad but learnt that it was gonna be released two days later I leave San Francisco. Gonna be back in San Francisco in three months and gonna target is Iphone 4G!

Here is the video of Iphone Store in SA…

http://vimeo.com/moogaloop.swf?clip_id=10703597&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1]]>

10,04,2010 at 18:55 Yorum bırakın

The Blanks Showreel

<![CDATA[
I was on the website of Ucman Balaban saw the showreel that he published. I am honored to share it with you.

http://vimeo.com/moogaloop.swf?clip_id=9821296&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1]]>

02,03,2010 at 1:09 Yorum bırakın


Takvim

Ekim 2017
P S Ç P C C P
« Ara    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Posts by Month

Posts by Category