forked from 0x2620/oxjs
add video editor demo
This commit is contained in:
rolux
parent
8fe529df81
commit
f8ec3fccf4
8 changed files with 5947 additions and 162 deletions
|
|
@ -19,12 +19,15 @@ Ox.VideoEditor = function(options, self) {
|
|||
duration: 0,
|
||||
find: '',
|
||||
frameURL: function() {},
|
||||
fps: 25, // fixme: doesn't get handed through to player
|
||||
fps: 25,
|
||||
getLargeTimelineImageURL: null,
|
||||
getSmallTimelineImageURL: null,
|
||||
getVideoImageURL: null,
|
||||
'in': 0,
|
||||
height: 0,
|
||||
largeTimeline: true,
|
||||
layers: [],
|
||||
matches: [],
|
||||
points: [0, 0],
|
||||
out: 0,
|
||||
position: 0,
|
||||
posterFrame: 0,
|
||||
showAnnotations: false,
|
||||
|
|
@ -41,6 +44,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
that.gainFocus();
|
||||
})
|
||||
.bindEvent({
|
||||
key_0: toggleMuted,
|
||||
key_shift_0: function() {
|
||||
movePositionBy(-self.options.position);
|
||||
},
|
||||
|
|
@ -73,7 +77,6 @@ Ox.VideoEditor = function(options, self) {
|
|||
key_left: function() {
|
||||
movePositionBy(-1);
|
||||
},
|
||||
key_m: toggleMute,
|
||||
key_o: function() {
|
||||
setPoint('out');
|
||||
},
|
||||
|
|
@ -116,7 +119,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
key_slash: function() {
|
||||
select('cut');
|
||||
},
|
||||
key_space: togglePlay,
|
||||
key_space: togglePaused,
|
||||
key_up: function() {
|
||||
movePositionBy(-self.sizes.timeline[0].width);
|
||||
}
|
||||
|
|
@ -139,17 +142,25 @@ Ox.VideoEditor = function(options, self) {
|
|||
self.sizes = getSizes();
|
||||
|
||||
['play', 'in', 'out'].forEach(function(type, i) {
|
||||
self.$player[i] = new Ox.VideoEditorPlayer({
|
||||
self.$player[i] = new Ox.VideoPlayer({
|
||||
controlsBottom: type == 'play' ?
|
||||
['play', 'playInToOut', 'mute', 'size', 'space', 'position'] :
|
||||
['goto', 'set', 'space', 'position'],
|
||||
duration: self.options.duration,
|
||||
externalControls: true,
|
||||
find: self.options.find,
|
||||
height: self.sizes.player[i].height,
|
||||
id: 'player' + Ox.toTitleCase(type),
|
||||
points: self.options.points,
|
||||
position: type == 'play' ? self.options.position : self.options.points[type == 'in' ? 0 : 1],
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
paused: true,
|
||||
position: type == 'play' ? self.options.position : self.options[type],
|
||||
posterFrame: self.options.posterFrame,
|
||||
showMarkers: true,
|
||||
showMilliseconds: 2,
|
||||
subtitles: self.options.subtitles,
|
||||
type: type,
|
||||
url: type == 'play' ? self.options.videoURL : self.options.frameURL,
|
||||
video: type == 'play' ? self.options.video : self.options.getVideoImageURL,
|
||||
width: self.sizes.player[i].width
|
||||
})
|
||||
.css({
|
||||
|
|
@ -157,46 +168,49 @@ Ox.VideoEditor = function(options, self) {
|
|||
top: self.sizes.player[i].top + 'px'
|
||||
})
|
||||
.bindEvent(type == 'play' ? {
|
||||
playing: changePlayer,
|
||||
togglesize: toggleSize
|
||||
position: changePlayer,
|
||||
size: toggleSize
|
||||
} : {
|
||||
change: function() {
|
||||
gotopoint: function() {
|
||||
goToPoint(type);
|
||||
},
|
||||
set: function() {
|
||||
setpoint: function() {
|
||||
setPoint(type);
|
||||
}
|
||||
})
|
||||
.appendTo(self.$editor);
|
||||
});
|
||||
|
||||
self.$timeline[0] = new Ox.LargeTimeline({
|
||||
self.$timeline[0] = new Ox.LargeVideoTimeline({
|
||||
cuts: self.options.cuts,
|
||||
duration: self.options.duration,
|
||||
find: self.options.find,
|
||||
getImageURL: self.options.getLargeTimelineImageURL,
|
||||
id: 'timelineLarge',
|
||||
matches: self.options.matches,
|
||||
points: self.options.points,
|
||||
'in': self.options['in'],
|
||||
//matches: self.options.matches,
|
||||
out: self.options.out,
|
||||
position: self.options.position,
|
||||
subtitles: self.options.subtitles,
|
||||
videoId: self.options.videoId,
|
||||
type: 'editor',
|
||||
width: self.sizes.timeline[0].width
|
||||
})
|
||||
.css({
|
||||
left: self.sizes.timeline[0].left + 'px',
|
||||
top: self.sizes.timeline[0].top + 'px'
|
||||
})
|
||||
.bindEvent('change', changeTimelineLarge)
|
||||
.bindEvent('changeEnd', changeTimelineLarge)
|
||||
.bindEvent('position', changeTimelineLarge)
|
||||
.appendTo(self.$editor);
|
||||
|
||||
self.$timeline[1] = new Ox.BlockTimeline({
|
||||
self.$timeline[1] = new Ox.BlockVideoTimeline({
|
||||
cuts: self.options.cuts,
|
||||
duration: self.options.duration,
|
||||
find: self.options.find,
|
||||
getImageURL: self.options.getSmallTimelineImageURL,
|
||||
id: 'timelineSmall',
|
||||
matches: self.options.matches,
|
||||
points: self.options.points,
|
||||
//matches: self.options.matches,
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
position: self.options.position,
|
||||
subtitles: self.options.subtitles,
|
||||
videoId: self.options.videoId,
|
||||
|
|
@ -204,9 +218,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
})
|
||||
.css({
|
||||
left: self.sizes.timeline[1].left + 'px',
|
||||
top: self.sizes.timeline[1].top + 'px'
|
||||
top: self.sizes.timeline[1].top + 'px',
|
||||
})
|
||||
.bindEvent('change', changeTimelineSmall)
|
||||
.bindEvent('position', changeTimelineSmall)
|
||||
.appendTo(self.$editor);
|
||||
|
||||
self.$annotations = new Ox.Element()
|
||||
|
|
@ -267,7 +281,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
orientation: 'horizontal'
|
||||
});
|
||||
|
||||
function changePlayer(event, data) {
|
||||
function changePlayer(data) {
|
||||
self.options.position = data.position;
|
||||
self.$timeline[0].options({
|
||||
position: data.position
|
||||
|
|
@ -424,9 +438,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function goToPoint(point) {
|
||||
self.options.position = self.options.points[point == 'in' ? 0 : 1];
|
||||
self.options.position = self.options[point];
|
||||
setPosition();
|
||||
that.triggerEvent('change', {
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
}
|
||||
|
|
@ -434,7 +448,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
function movePositionBy(sec) {
|
||||
self.options.position = Ox.limit(self.options.position + sec, 0, self.options.duration);
|
||||
setPosition();
|
||||
that.triggerEvent('change', {
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
}
|
||||
|
|
@ -442,7 +456,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
function movePositionTo(type, direction) {
|
||||
self.options.position = getNextPosition(type, direction);
|
||||
setPosition();
|
||||
that.triggerEvent('change', {
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
}
|
||||
|
|
@ -498,26 +512,17 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function setPoint(point) {
|
||||
self.options.points[point == 'in' ? 0 : 1] = self.options.position;
|
||||
if (self.options.points[1] < self.options.points[0]) {
|
||||
self.options.points[point == 'in' ? 1 : 0] = self.options.position;
|
||||
self.options[point] = self.options.position;
|
||||
self.$player[0].options(point, self.options[point]);
|
||||
self.$player[point == 'in' ? 1 : 2].options({
|
||||
position: self.options[point]
|
||||
});
|
||||
self.$timeline.forEach(function($timeline) {
|
||||
$timeline.options(point, self.options[point]);
|
||||
});
|
||||
if (self.options['in'] > self.options.out) {
|
||||
setPoint(point == 'in' ? 'out' : 'in');
|
||||
}
|
||||
setPoints();
|
||||
}
|
||||
|
||||
function setPoints() {
|
||||
self.$player.forEach(function(v, i) {
|
||||
v.options($.extend({
|
||||
points: self.options.points
|
||||
}, i ? {
|
||||
position: self.options.points[i - 1]
|
||||
} : {}));
|
||||
});
|
||||
self.$timeline.forEach(function(v) {
|
||||
v.options({
|
||||
points: self.options.points
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setPosition() {
|
||||
|
|
@ -533,8 +538,8 @@ Ox.VideoEditor = function(options, self) {
|
|||
|
||||
function setSizes() {
|
||||
self.sizes = getSizes();
|
||||
self.$player.forEach(function(v, i) {
|
||||
v.options({
|
||||
self.$player.forEach(function($player, i) {
|
||||
$player.options({
|
||||
height: self.sizes.player[i].height,
|
||||
width: self.sizes.player[i].width
|
||||
})
|
||||
|
|
@ -543,8 +548,8 @@ Ox.VideoEditor = function(options, self) {
|
|||
top: self.sizes.player[i].top + 'px'
|
||||
});
|
||||
});
|
||||
self.$timeline.forEach(function(v, i) {
|
||||
v.options({
|
||||
self.$timeline.forEach(function($timeline, i) {
|
||||
$timeline.options({
|
||||
width: self.sizes.timeline[i].width
|
||||
})
|
||||
.css({
|
||||
|
|
@ -559,12 +564,12 @@ Ox.VideoEditor = function(options, self) {
|
|||
setSizes();
|
||||
}
|
||||
|
||||
function toggleMute() {
|
||||
self.$player[0].toggleMute();
|
||||
function toggleMuted() {
|
||||
self.$player[0].toggleMuted();
|
||||
}
|
||||
|
||||
function togglePlay() {
|
||||
self.$player[0].togglePlay();
|
||||
function togglePaused() {
|
||||
self.$player[0].togglePaused();
|
||||
}
|
||||
|
||||
function toggleSize(event, data) {
|
||||
|
|
@ -577,7 +582,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'width' || key == 'height') {
|
||||
//Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
|
||||
Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
|
||||
setSizes();
|
||||
} else if (key == 'position') {
|
||||
self.$player[0].position(value);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue