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

add div to properly capture mouse position

Browse source
This commit is contained in:
rolux 2011-05-12 13:15:32 +02:00
parent a7d5774855
commit 57618c850f
1 changed files with 69 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -22,6 +22,7 @@ Ox.VideoPlayer = function(options, self) {
self.buffered = [];
self.controlsTimeout;
self.dragTimeout;
self.barHeight = 16;
self.outerBarWidth = self.options.width - 96;
@ -200,6 +201,15 @@ Ox.VideoPlayer = function(options, self) {
})
.appendTo(self.$outerBar);
self.$interfaceBar = Ox.Element()
.css({
float: 'left',
width: self.outerBarWidth + 'px',
height: self.barHeight + 'px',
marginLeft: - self.outerBarWidth + 'px'
})
.appendTo(self.$controls);
self.$tooltip = Ox.Tooltip({
animate: false
});
@ -216,18 +226,6 @@ Ox.VideoPlayer = function(options, self) {
.html(Ox.formatDuration(self.options.position))
.appendTo(self.$controls)
function mousedownBar(e) {
setPosition(getPosition(e));
self.$video.position(self.options.position);
}
function mouseleaveBar(e) {
self.$tooltip.hide();
}
function mousemoveBar(e) {
self.$tooltip.options({
title: Ox.formatDuration(getPosition(e))
}).show(e.clientX, e.clientY);
}
function getPosition(e) {
// fixme: no offsetX in firefox???
if ($.browser.mozilla) {
@ -237,6 +235,7 @@ Ox.VideoPlayer = function(options, self) {
0, self.duration
);
} else {
Ox.print(e.offsetX)
return Ox.limit(
(e.offsetX - self.barHeight / 2) / self.innerBarWidth * self.duration,
0, self.duration
@ -244,34 +243,6 @@ Ox.VideoPlayer = function(options, self) {
}
}
function setPosition(position) {
self.options.position = position;
//Ox.print(-self.barWidth - 4 + self.barWidth * position / self.duration)
self.$positionMarker.css({
marginLeft: self.innerBarWidth * position / self.duration + self.markerOffset + 'px',
});
self.$position.html(Ox.formatDuration(position));
}
function loadedmetadata(data) {
//self.$position.html(Ox.formatDuration(data.video.duration))
Ox.print('!!!!', data.video.width, data.video.height, data.video.videoWidth, data.video.videoHeight)
self.duration = data.video.duration;
Ox.print('DURATION', Ox.formatDuration(self.duration));
hideLoadingIcon();
that.gainFocus().bindEvent({
key_space: function() {
self.$playButton.toggleTitle();
togglePlay();
}
});
self.$outerBar.bind({
mousedown: mousedownBar,
mousemove: mousemoveBar,
mouseleave: mouseleaveBar
});
}
function getBufferedImageURL() {
var width = self.innerBarWidth,
height = self.barHeight,
@ -316,6 +287,55 @@ Ox.VideoPlayer = function(options, self) {
}, 0);
}
function loadedmetadata(data) {
//self.$position.html(Ox.formatDuration(data.video.duration))
Ox.print('!!!!', data.video.width, data.video.height, data.video.videoWidth, data.video.videoHeight)
self.duration = data.video.duration;
Ox.print('DURATION', Ox.formatDuration(self.duration));
hideLoadingIcon();
that.gainFocus().bindEvent({
key_space: function() {
self.$playButton.toggleTitle();
togglePlay();
}
});
self.$interfaceBar
.bind({
mousedown: mousedownBar,
mouseleave: mouseleaveBar,
mousemove: mousemoveBar,
})
.bindEvent({
drag: dragBar,
});
}
function dragBar(e) {
setPosition(getPosition(e));
if (self.dragTimeout) {
clearTimeout(self.dragTimeout);
self.dragTimeout = 0;
}
self.dragTimeout = setTimeout(function() {
self.$video.position(self.options.position);
}, 1000);
}
function mousedownBar(e) {
setPosition(getPosition(e));
self.$video.position(self.options.position);
}
function mouseleaveBar(e) {
self.$tooltip.hide();
}
function mousemoveBar(e) {
self.$tooltip.options({
title: Ox.formatDuration(getPosition(e))
}).show(e.clientX, e.clientY);
}
function showControls() {
clearTimeout(self.controlsTimeout);
self.$controls.animate({
@ -323,6 +343,15 @@ Ox.VideoPlayer = function(options, self) {
}, 250);
}
function setPosition(position) {
self.options.position = position;
//Ox.print(-self.barWidth - 4 + self.barWidth * position / self.duration)
self.$positionMarker.css({
marginLeft: self.innerBarWidth * position / self.duration + self.markerOffset + 'px',
});
self.$position.html(Ox.formatDuration(position));
}
function showLoadingIcon() {
self.$loadingIcon.animate({
opacity: 1