oxjs/source/Ox.UI/js/Video/Ox.VideoElement.js

185 lines
5.1 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-04-22 22:03:10 +00:00
Ox.VideoElement = function(options, self) {
self = self || {};
var that = Ox.Element('<video>', self)
2011-04-22 22:03:10 +00:00
.defaults({
fps: 25,
height: 0,
loop: false,
muted: false,
paused: false,
playInToOut: false,
points: [0, 0],
position: 0,
poster: '',
url: '',
width: 0
})
.options(options || {})
.attr({
//height: self.options.height,
2011-04-22 22:03:10 +00:00
poster: self.options.poster,
preload: 'auto',
src: self.options.url,
//width: self.options.width
2011-04-22 22:03:10 +00:00
})
.css({
height: self.options.height + 'px',
width: self.options.width + 'px'
})
.bind({
ended: ended,
canplay: function() {
Ox.print('canplay')
},
durationchange: function() {
Ox.print('durationchange')
},
2011-04-22 22:03:10 +00:00
loadedmetadata: function() {
Ox.print('loadedmetadata', self.video.duration)
2011-04-22 22:03:10 +00:00
self.video.currentTime = self.options.position;
that.triggerEvent('loadedmetadata', {
video: self.video
});
},
progress: function() {
that.triggerEvent('progress', {
video: self.video
});
2011-05-12 10:51:17 +00:00
},
seeked: function() {
that.triggerEvent('seeked');
},
seeking: function() {
that.triggerEvent('seeking');
2011-04-22 22:03:10 +00:00
}
});
$.extend(self, {
millisecondsPerFrame: 1000 / self.options.fps,
video: that.$element[0]
});
function ended() {
that.pause()
.triggerEvent('paused', {
position: self.options.position
});
}
function playing() {
var event = 'playing';
self.options.position = Math.round(self.video.currentTime * self.options.fps) / self.options.fps;
if (self.options.playInToOut && self.options.position >= self.options.points[1]) {
event = 'paused';
that.position(self.options.points[1]).pause();
}
that.triggerEvent(event, {
position: self.options.position
});
}
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
2011-04-22 22:03:10 +00:00
if (key == 'height') {
that.size(self.options.width, value);
} else if (key == 'muted') {
that[value ? 'mute' : 'unmute']();
} else if (key == 'paused') {
that[value ? 'pause' : 'play']();
} else if (key == 'points') {
that.points(value);
} else if (key == 'width') {
that.size(value, self.options.height);
}
};
that.mute = function() {
self.options.muted = true;
self.video.muted = true;
return that;
};
that.muted = function() {
return self.options.muted;
}
that.pause = function() {
self.options.paused = true;
self.options.playInToOut = false;
self.video.pause();
clearInterval(self.playInterval);
return that;
};
that.paused = function() {
return self.options.paused;
}
that.play = function() {
self.options.paused = false;
self.video.play();
self.playInterval = setInterval(playing, self.millisecondsPerFrame);
return that;
};
that.playInToOut = function() {
self.options.playInToOut = true;
that.position(self.options.points[0]);
self.options.paused && that.play();
return that;
};
that.points = function(points) {
self.options.points = points;
}
that.position = function(pos) {
// fixme: why not use options??
2011-04-22 22:03:10 +00:00
if (arguments.length == 0) {
return self.video.currentTime;
} else {
self.options.position = pos;
self.video.currentTime = self.options.position;
return that;
}
};
that.size = function(width, height) {
// fixme: why options? use css!
if (arguments.length == 0) {
return {
width: self.options.width,
height: self.options.height
};
} else {
self.options.width = width;
self.options.height = height;
that.css({
width: width + 'px',
height: height + 'px'
});
return that;
}
};
that.toggleMute = function() {
self.video.muted = !self.video.muted;
return that;
}
that.togglePlay = function() {
self.options.paused = !self.options.paused;
that[self.options.paused ? 'pause' : 'play']();
}
that.unmute = function() {
self.video.muted = false;
return that;
};
return that;
};