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