0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

updating VideoPreview

Browse source
This commit is contained in:
rlx 2011-09-18 06:50:54 +00:00
parent 170212a274
commit 7abc26fd0d
1 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
source/Ox.UI/js/Video/Ox.VideoPreview.js
View file

@ -8,9 +8,10 @@ Ox.VideoPreview = function(options, self) {
duration: 0,
getFrame: null,
fps: 25,
frameHeight: 144,
frameWidth: 256,
frameRatio: 16/9,
height: 256,
timeline: '',
width: 256
})
.options(options || {})
.addClass('OxVideoPreview');
@ -21,16 +22,13 @@ Ox.VideoPreview = function(options, self) {
self.$frame = $('<img>')
.addClass('OxFrame')
.attr({src: self.options.getFrame()})
.css({
height: self.options.frameHeight + 'px',
width: self.options.frameWidth + 'px'
})
.css(getFrameCSS())
.appendTo(that.$element);
self.$timeline = $('<img>')
.addClass('OxTimeline')
.attr({src: self.options.timeline})
.css({width: self.options.frameWidth + 'px'})
.css({width: self.options.width + 'px'})
.appendTo(that.$element);
self.$interface = Ox.Element({
@ -55,25 +53,36 @@ Ox.VideoPreview = function(options, self) {
function click(e) {
that.triggerEvent('click', {
//e.offsetX does not work in Firefox
// e.offsetX does not work in Firefox
position: getPosition(e.clientX - that.offset().left)
});
}
function getFrameCSS() {
var height = self.options.height - 16,
width = Math.round(height * self.options.frameRatio),
marginLeft = Math.round((self.options.width - width) / 2);
return {
height: height + 'px',
width: width + 'px',
marginLeft: marginLeft + 'px'
}
}
function getPosition(x) {
return Math.round(
self.options.duration * x / self.options.frameWidth * self.options.fps
self.options.duration * x / self.options.width * self.options.fps
) / self.options.fps;
}
function startLoading() {
var last,
steps = [Math.round(self.options.frameWidth / 2)];
steps = [Math.round(self.options.width / 2)];
while ((last = steps[steps.length - 1]) > 1) {
steps.push(Math.round(last / 2));
}
steps.forEach(function(step) {
Ox.loop(0, self.options.frameWidth, step, function(x) {
Ox.loop(0, self.options.width, step, function(x) {
var frame = self.options.getFrame(getPosition(x));
if (
self.loaded.indexOf(frame) == -1
@ -99,11 +108,11 @@ Ox.VideoPreview = function(options, self) {
}
self.setOption = function(key, value) {
if (key == 'frameHeight') {
self.$frame.css({height: value + 'px'});
} else if (key == 'frameWidth') {
if (key == 'height') {
self.$frame.css(getFrameCSS());
} else if (key == 'width') {
self.$frame.attr({src: self.options.getFrame()})
.css({width: value + 'px'});
.css(getFrameCSS());
self.$timeline.css({width: value + 'px'});
stopLoading();
}