Prototyping 23 April 2013: Difference between revisions
Lassebosch (talk | contribs) |
No edit summary |
||
| Line 1: | Line 1: | ||
Continuing to look at jquery + js + event programming, a take on an "iMovie" in Javascript. | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| Line 130: | Line 132: | ||
</html> | </html> | ||
</source> | </source> | ||
== Questions == | |||
* How to apply to non html5 sources (like youtube) | |||
* How to apply to multiple sources (not just a single) | |||
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)