Prototyping 23 April 2013

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Continuing to look at jquery + js + event programming, a take on an "iMovie" in Javascript.

<!DOCTYPE html>
<meta></meta>
<html>
<head>
<title></title>
<script src="http://pzwart3.wdka.hro.nl/lib/jquery/jquery.js"></script>
<script src="http://pzwart3.wdka.hro.nl/lib/jquery/jquery-ui.js"></script>

<script>

$(document).ready( function() {

	$('#drag').draggable();
	$('#sortthis').sortable()
	$('li').click(function(){
		$(this).css(
			'border', '2px dotted blue')
	}

		)

});


</script>


<style>
	li {
		cursor: pointer;
		float: left;
		margin: 10px;
		border: 1px solid;
	}
	ul {
		list-style: none;
		padding: 0;
	}
</style>
</head>
<body>
<div id='drag'> ======================================================== </div>
<ul id ="sortthis">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
</body>
</html>

Awesome js VIDEO-cutter

<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- <script src="/lib/jquery/jquery.js"></script>
<script src="/lib/jquery/jquery-ui.js"></script> -->
<script type="text/javascript" src="http://www.lvdbc.dk/_Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://www.lvdbc.dk/_jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
	$(document).ready(function() {
		var video = $('video').get(0)
		//$('#hello').draggable();
		$('ul').sortable({

			helper : 'clone'

		});

		$('#cut').click(function(){
			var t = video.currentTime;
			$('<li></li>').text(t).appendTo('ul').click(function(){
				console.log(t);
				video.currentTime=t;
				var listItem=this;
				$('.playing').removeClass('playing');
				$(this).addClass('playing');
				window.setTimeout(function(){
					$(listItem).next().trigger('click')
					console.log(listItem);
				}, 1000)
			})
		})

	});
</script>

<style>
li{
	cursor:move;
	float: left;
	margin: 10px;
	border: 1px solid; 
	background: aqua;
	padding: 3px;
}

ul{
	list-style: none;
	padding: 0;
}
.playing{
	background:red;
}
</style>

</head>

<body>
<!-- <div id='hello'>hello<br>WORLD</div>  -->

<video controls>
	<source src='http://pzwart3.wdka.hro.nl/video/NotationsUnderProvisions_WORM.webm'>
</video>

<button id='cut'>CUT</button>
<ul>

</ul>

</body>

</html>

Questions

How to apply to non html5 sources (like youtube)
How to apply to multiple sources (not just a single)