fix and optimize video preview
This commit is contained in:
parent
5237fcd29d
commit
4e615e722d
3 changed files with 29 additions and 14 deletions
|
@ -776,7 +776,7 @@ div.OxInput > input.OxInput {
|
|||
}
|
||||
/*
|
||||
--------------------------------------------------------------------------------
|
||||
OxEditable
|
||||
OxEditableElement
|
||||
--------------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
|
|
@ -419,10 +419,10 @@ Ox.Calendar = function(options, self) {
|
|||
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
// ...
|
||||
// ... FIXME: implement
|
||||
},
|
||||
doubleclick: function() {
|
||||
// ...
|
||||
// ... FIXME: implement
|
||||
}
|
||||
})
|
||||
.appendTo(that),
|
||||
|
@ -437,7 +437,7 @@ Ox.Calendar = function(options, self) {
|
|||
scrollBy(1);
|
||||
},
|
||||
doubleclick: function() {
|
||||
scrollTo(1000000, true)
|
||||
scrollTo(1000000, true);
|
||||
}
|
||||
})
|
||||
.appendTo(that),
|
||||
|
|
|
@ -44,10 +44,15 @@ Ox.VideoPreview = function(options, self) {
|
|||
|
||||
self.$interface = Ox.Element({
|
||||
tooltip: function(event) {
|
||||
//event.offsetX does not work in Firefox
|
||||
// fixme: use layerX then
|
||||
// e.offsetX does not work in Firefox
|
||||
var position = getPosition(event.clientX - that.offset().left);
|
||||
self.$frame.attr({src: self.options.getFrame(position)});
|
||||
self.$frame.attr({src: getClosestFrame(position)});
|
||||
Ox.print('closest frame:', self.$frame.attr('src'));
|
||||
self.timeout && clearTimeout(self.timeout);
|
||||
self.timeout = setTimeout(function() {
|
||||
self.$frame.attr({src: self.options.getFrame(position)});
|
||||
Ox.print('exact frame:', self.$frame.attr('src'));
|
||||
}, 250);
|
||||
return Ox.formatDuration(position, 2);
|
||||
}
|
||||
})
|
||||
|
@ -69,6 +74,14 @@ Ox.VideoPreview = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function getClosestFrame(position) {
|
||||
return self.loaded.length == 0
|
||||
? self.options.getFrame(self.options.position)
|
||||
: self.loaded.sort(function(a, b) {
|
||||
return Math.abs(a.position - position) - Math.abs(b.position - position);
|
||||
})[0].frame;
|
||||
}
|
||||
|
||||
function getFrameCSS() {
|
||||
var css = {},
|
||||
elementWidth = self.options.width,
|
||||
|
@ -106,23 +119,25 @@ Ox.VideoPreview = function(options, self) {
|
|||
}
|
||||
steps.forEach(function(step) {
|
||||
Ox.loop(0, self.options.width, step, function(x) {
|
||||
var frame = self.options.getFrame(getPosition(x));
|
||||
var position = getPosition(x),
|
||||
frame = self.options.getFrame(position);
|
||||
if (
|
||||
self.loaded.indexOf(frame) == -1
|
||||
&& self.queue.indexOf(frame) == -1
|
||||
!Ox.getObject(self.loaded, 'frame', frame)
|
||||
&& !Ox.getObject(self.queue, 'frame', frame)
|
||||
) {
|
||||
self.queue.push(frame);
|
||||
self.queue.push({frame: frame, position: position});
|
||||
}
|
||||
});
|
||||
});
|
||||
loadFrame();
|
||||
self.queue.length && loadFrame();
|
||||
function loadFrame() {
|
||||
var image = self.queue.shift();
|
||||
$('<img>')
|
||||
.load(function() {
|
||||
self.loaded.push(self.queue.shift());
|
||||
self.loaded.push(image);
|
||||
self.queue.length && loadFrame();
|
||||
})
|
||||
.attr({src: self.queue[0]});
|
||||
.attr({src: image.frame})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue