Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Zoom on mousemove #2

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Zoom on mousemove #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ae93485
Added throttle example
lvidarte Nov 1, 2013
af6e99f
Added getFrameAt function
lvidarte Nov 3, 2013
73ff042
Changed parameter name
lvidarte Nov 3, 2013
5c02f07
Added new opcode coop videos
lvidarte Nov 3, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 46 additions & 1 deletion Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ weaved by the OpCoode Cooperative http://opcode.coop
This project like all the Malbec Broadcast projects is released under the
AGPL v3 Licence.

Show the video: http://www.youtube.com/watch?v=iOzS8xtnsQo
Show the videos at Opcode Coop channel:

* http://www.youtube.com/watch?v=ex2nVUNmzeo
* http://www.youtube.com/watch?v=Yph6Z2rhA_k

Play with the demo http://www.opcode.coop/filmstrip/

Expand Down Expand Up @@ -65,10 +68,52 @@ filmstrip.on('draw:frame', function(event, args) {
this.drawFrame($('#filmstrip'), args);
});
```

####Capture frame
```html
<canvas id="filmstrip"></canvas>
<canvas id="frame"></canvas>
```

```javascript
filmstrip.on('loaded', function() {
$('#frame').css({
width: filmstrip.video.videoWidth,
height: filmstrip.video.videoHeight
});
});

$('#filmstrip').on('mousemove', function(event) {
filmstrip.captureFrameAt(
filmstrip.getSecondForMousePosition(
event.offsetX,
event.offsetY
)
);
});

filmstrip.on('frame:captured', function() {
var ctx = $('#frame').get(0).getContext('2d');
ctx.drawImage(filmstrip.capture, 0, 0);
});
```

####Using trottle function on resize (require underscore.js)
```javascript
var resize = _.throttle(function(event. ui) {
filmstrip.resize(ui.size.width, ui.size.height)
}, 250, {leading: false});
```

####Dependencies

* jQuery

####Use ffmpeg to convert videos for better performance
```bash
ffmpeg -i original_video.mkv -s 320x180 -vcodec libx264 -an -r 1 filmstrip_video.mp4
```

####Run Example

```bash
Expand Down
35 changes: 19 additions & 16 deletions example/filmstrip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,18 @@
$(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'});
var width = 120;
var height = 600;

window.fsV = new Filmstrip(model, {
width: 120,
height: 600,
$('#fs').css({
width: width + 'px',
height: height + 'px'
});

window.fs = new Filmstrip(model, {
width: width,
height: height,
bgColor: '#333',
drawBackground: true,
drawHoles: true,
Expand All @@ -34,31 +39,29 @@
strechOnResize: true,
});

fsV.load();
fs.load();

fsV.on('loaded', function() {
//this.resize(400);
fs.on('loaded', function() {
});

fsV.on('draw:finished', function() {
this.drawCanvas($('#fsV0 > canvas'));
fs.on('draw:finished', function() {
this.drawCanvas($('#fs > canvas'));
});

fsV.on('draw:frame', function(event, args) {
this.drawFrame($('#fsV0 > canvas'), args);
fs.on('draw:frame', function(event, args) {
this.drawFrame($('#fs > canvas'), args);
});

$('#fsV0').resizable({
$('#fs').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'});
fs.resize(ui.size.width, ui.size.height);
},
});

});
</script>
</head>
<body>
<div id="fsV0" style="border:solid 1px #111"><canvas></canvas></div></td>
<div id="fs" style="border:solid 1px #111"><canvas></canvas></div>
</body>
</html>
75 changes: 75 additions & 0 deletions example/filmstrip_throttle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!doctype 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://underscorejs.org/underscore.js"></script>
<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 width = 120;
var height = 600;

$('#fs').css({
width: width + 'px',
height: height + 'px'
});

window.fs = new Filmstrip(model, {
width: width,
height: height,
bgColor: '#333',
drawBackground: true,
drawHoles: true,
holesColor: '#222',
holesDispersion: .7,
bandsPadding: 20,
autoOrientation: true,
strechOnResize: true,
});

fs.load();

fs.on('loaded', function() {
});

fs.on('draw:finished', function() {
this.drawCanvas($('#fs > canvas'));
});

fs.on('draw:frame', function(event, args) {
this.drawFrame($('#fs > canvas'), args);
});

$('#fs').resizable({
resize: _.throttle(function(event, ui) {
fs.resize(ui.size.width, ui.size.height);
}, 200, {leading: false}),
});

$('#fs').on('resize', function(event, ui) {
$('#fs > canvas').css({
width: ui.size.width + 'px',
height: ui.size.height + 'px'
});
});

});
</script>
</head>
<body>
<div id="fs" style="border:solid 1px #111"><canvas></canvas></div>
</body>
</html>
160 changes: 160 additions & 0 deletions example/filmstrip_zoom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<!doctype 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;
}
div.box {
border: solid 1px #111;
margin-top: 20px;
}
</style>
<script src="http://underscorejs.org/underscore.js"></script>
<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 width = 1000;
var height = 40;

// Current Time bar
var currentTime = $('#currentTime').get(0);
var currentTimeCtx = currentTime.getContext('2d');
var currentTimeHeight = 1;
var currentTimeColor = '#aaa';

// Zoom canvas
var frameCtx = $('#frame').get(0).getContext('2d');
var bigFrameCtx = $('#bigFrame').get(0).getContext('2d');

// Set div dimensions
$('#fs').parent().css({
width: width + 'px',
height: height + 'px'
});
$('#currentTime').parent().css({
width: (width + 2) + 'px',
height: currentTimeHeight + 'px'
});

// Filmstrip
var fs = new Filmstrip(model, {
width: width,
height: height,
bgColor: '#333',
drawBackground: true,
bandsPadding: 0,
autoOrientation: false,
orientation: 'horizontal',
strechOnResize: true,
});

fs.load();

fs.on('loaded', function() {
var w = fs.video.videoWidth;
var h = fs.video.videoHeight;

$('#frame').parent().css({
width: w + 'px',
height: h + 'px'
});
$('#frame').attr({
width: w + 'px',
height: h + 'px'
});

$('#bigFrame').parent().css({
width: (w * 2) + 'px',
height: (h * 2) + 'px'
});
$('#bigFrame').attr({
width: w + 'px',
height: h + 'px'
});
});

fs.on('draw:finished', function() {
this.drawCanvas($('#fs'));
});

fs.on('draw:frame', function(event, args) {
this.drawFrame($('#fs'), args);
});

/* No trottled
$('#fs').parent().resizable({
resize: function(event, ui) {
fs.resize(ui.size.width, ui.size.height);
},
});
//*/

//* Trottled
$('#fs').parent().resizable({
resize: _.throttle(function(event, ui) {
fs.resize(ui.size.width, ui.size.height);
}, 200, {leading: false}),
});
//*/

$('#fs').parent().on('resize', function(event, ui) {
$('#fs').css({
width: ui.size.width + 'px',
height: ui.size.height + 'px'
});
$('#currentTime').css({
width: (ui.size.width + 2) + 'px',
});
});

/* No throttled
$('#fs').on('mousemove', function(e) {
var second = fs.getSecondForMousePosition(e.offsetX, e.offsetY);
fs.captureFrameAt(second);
});
//*/

//* Trottled
$('#fs').on('mousemove', _.throttle(function(e) {
var second = fs.getSecondForMousePosition(e.offsetX, e.offsetY);
fs.captureFrameAt(second);
}, 20, {leading: false}));
//*/

$('#fs').on('mousemove', function(e) {
currentTime.width = fs.width;
currentTime.height = fs.height;
currentTimeCtx.clearRect(0, 0, fs.width, currentTimeHeight);
currentTimeCtx.fillStyle = currentTimeColor;
currentTimeCtx.fillRect(0, 0, e.offsetX, currentTimeHeight);
});

fs.on('frame:captured', function() {
frameCtx.drawImage(fs.capture, 0, 0);
bigFrameCtx.drawImage(fs.capture, 0, 0);
$('#bigFrame').css({
width: (fs.video.videoWidth * 2) + 'px',
height: (fs.video.videoHeight * 2) + 'px'
});
});

});
</script>
</head>
<body>
<div class="box"><canvas id="fs"></canvas></div>
<div><canvas id="currentTime" style="position:absolute"></canvas></div>
<div class="box"><canvas id="frame"></canvas></div>
<div class="box"><canvas id="bigFrame"></canvas></div>
</body>
</html>
Loading