Prototyping 23 April 2013: Difference between revisions

Latest revision as of 15:11, 28 April 2013

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)