159 lines
4.2 KiB
JavaScript
159 lines
4.2 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=js
|
|
Ox.VideoElement = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('<video>', self)
|
|
.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({
|
|
poster: self.options.poster,
|
|
preload: 'auto',
|
|
src: self.options.url
|
|
})
|
|
.css({
|
|
height: self.options.height + 'px',
|
|
width: self.options.width + 'px'
|
|
})
|
|
.bind({
|
|
ended: ended,
|
|
loadedmetadata: function() {
|
|
self.video.currentTime = self.options.position;
|
|
}
|
|
});
|
|
|
|
$.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
|
|
});
|
|
}
|
|
|
|
self.setOption = function(key, value) {
|
|
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) {
|
|
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;
|
|
|
|
};
|