filmstrip
Version:
html5 video preview widget
65 lines (55 loc) • 1.96 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Filmstrip</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
body {
background-color: #222;
margin: 20px;
}
</style>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="filmstrip.js"></script>
<script>
$(document).ready(function() {
var model = {src: 'http://opcode.coop/filmstrip/elephants_dream_r1.ogv'};
//var model = {src: '/sita.ogv'};
$('#fsV0').css({width: 120 + 'px', height: 600 + 'px'});
window.fsV = new Filmstrip(model, {
width: 120,
height: 600,
bgColor: '#333',
drawBackground: true,
drawHoles: true,
holesColor: '#222',
holesDispersion: .7,
bandsPadding: 20,
autoOrientation: true,
strechOnResize: true,
});
fsV.load();
fsV.on('loaded', function() {
//this.resize(400);
});
fsV.on('draw:finished', function() {
this.drawCanvas($('#fsV0 > canvas'));
});
fsV.on('draw:frame', function(event, args) {
this.drawFrame($('#fsV0 > canvas'), args);
});
$('#fsV0').resizable({
resize: function(event, ui) {
fsV.resize(ui.size.width, ui.size.height);
//$('#fsV0 > canvas').css({width: ui.size.width + 'px', height: ui.size.height + 'px'});
},
});
});
</script>
</head>
<body>
<div id="fsV0" style="border:solid 1px #111"><canvas></canvas></div></td>
</body>
</html>