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

some improvements to fullscreen mode

Browse source
This commit is contained in:
rolux 2011-05-15 09:52:37 +02:00
parent 609ffdd4d7
commit cc748127bb
1 changed files with 53 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -138,6 +138,9 @@ Ox.VideoPlayer = function(options, self) {
setPosition(self.options.position + self.secondsPerFrame);
self.video.currentTime = self.options.position;
},
key_shift_f: function() {
toggleFullscreen();
},
key_space: function() {
self.$playButton && self.$playButton.toggleTitle();
togglePaused();
@ -737,6 +740,7 @@ Ox.VideoPlayer = function(options, self) {
self.options.duration = self.out - self['in'];
self.video.currentTime = self.options.position;
self.$video.css(getCSS('video'));
self.$poster && self.$poster.css(getCSS('poster'));
hideLoadingIcon();
if (self.options.showIcon || self.options.showIconOnLoad) {
@ -884,7 +888,7 @@ Ox.VideoPlayer = function(options, self) {
function getCSS(element) {
var css;
if (element == 'controls') {
if (element == 'controls' || element == 'titlebar') {
css = {
width: self.width + 'px'
};
@ -904,12 +908,7 @@ Ox.VideoPlayer = function(options, self) {
height: logoHeight + 'px',
};
} else if (element == 'player') {
if (!self.offset) {
self.offset = that.offset();
}
css = {
left: self.options.fullscreen ? 0 : self.offset.left + 'px',
top: self.options.fullscreen ? 0 : self.offset.top + 'px',
css = Ox.extend({
width: self.width + 'px',
height: (self.options.fullscreen
? window.innerHeight
@ -917,7 +916,13 @@ Ox.VideoPlayer = function(options, self) {
self.options.externalControls
? (!!self.options.controls.length + !!self.options.title) * self.barHeight
: 0)) + 'px'
}
}, self.options.fullscreen ? {
left: 0,
top: 0
} : {}, self.exitFullscreen ? {
left: self.absoluteOffset.left,
top: self.absoluteOffset.top
} : {});
} else if (element == 'playIcon') {
var playIconPadding = Math.round(self.iconSize * 1/8),
playIconSize = self.iconSize - 2 * playIconPadding - 4;
@ -936,49 +941,7 @@ Ox.VideoPlayer = function(options, self) {
marginLeft: position * self.timelineImageWidth -
self.timelineImageWidth - 8 + 'px',
};
} else if (element == 'poster') {
css = {
width: self.width + 'px',
height: self.height + 'px'
};
} else if (element == 'progress') {
css = {
width: self.timelineImageWidth + 'px',
marginLeft: -self.timelineImageWidth + 'px'
};
} else if (element == 'subtitle') {
css = {
bottom: parseInt(self.height / 16) + 'px',
width: self.width + 'px',
fontSize: parseInt(self.height / 20) + 'px',
WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)'
};
} else if (element == 'space') {
css = {
width: self.timelineWidth + 'px'
};
} else if (element == 'timeline') {
css = {
width: self.timelineWidth + 'px'
};
} else if (element == 'timelineImage') {
css = {
width: self.timelineImageWidth + 'px'
};
} else if (element == 'timelineImages') {
css = {
width: self.timelineImageWidth + 'px'
};
} else if (element == 'timelineInterface') {
css = {
width: self.timelineWidth + 'px',
marginLeft: -self.timelineWidth + 'px'
};
} else if (element == 'titlebar') {
css = {
width: self.width + 'px'
};
} else if (element == 'video') {
} else if (element == 'poster' || element == 'video') {
var playerWidth = self.width,
playerHeight = self.height,
playerRatio = playerWidth / playerHeight,
@ -1002,6 +965,31 @@ Ox.VideoPlayer = function(options, self) {
marginLeft: parseInt((playerWidth - width) / 2),
marginTop: parseInt((playerHeight - height) / 2)
};
} else if (element == 'progress') {
css = {
width: self.timelineImageWidth + 'px',
marginLeft: -self.timelineImageWidth + 'px'
};
} else if (element == 'subtitle') {
css = {
bottom: parseInt(self.height / 16) + 'px',
width: self.width + 'px',
fontSize: parseInt(self.height / 20) + 'px',
WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)'
};
} else if (element == 'space' || element == 'timeline') {
css = {
width: self.timelineWidth + 'px'
};
} else if (element == 'timelineImage' || element == 'timelineImages') {
css = {
width: self.timelineImageWidth + 'px'
};
} else if (element == 'timelineInterface') {
css = {
width: self.timelineWidth + 'px',
marginLeft: -self.timelineWidth + 'px'
};
} else if (element == 'videoContainer') {
css = {
width: self.width + 'px',
@ -1112,7 +1100,7 @@ Ox.VideoPlayer = function(options, self) {
}
function toggleFullscreen() {
var wasPlaying;
var parentOffset, wasPlaying;
self.options.fullscreen = !self.options.fullscreen;
if (!self.options.paused) {
self.video.pause();
@ -1120,11 +1108,16 @@ Ox.VideoPlayer = function(options, self) {
}
if (self.options.fullscreen) {
self.$parent = that.parent();
self.offset = that.offset();
parentOffset = self.$parent.offset();
self.absoluteOffset = that.offset();
self.relativeOffset = {
left: self.absoluteOffset.left - parentOffset.left,
top: self.absoluteOffset.top - parentOffset.top
};
that.detach()
.css({
left: self.offset.left + 'px',
top: self.offset.top + 'px',
left: self.absoluteOffset.left + 'px',
top: self.absoluteOffset.top + 'px',
zIndex: 1000
})
.appendTo(Ox.UI.$body);
@ -1132,14 +1125,16 @@ Ox.VideoPlayer = function(options, self) {
wasPlaying && self.video.play();
});
} else {
self.exitFullscreen = true;
setSizes(function() {
that.detach()
.css({
left: self.offset.left + 'px',
top: self.offset.top + 'px'
left: self.relativeOffset.left + 'px',
top: self.relativeOffset.top + 'px'
})
.appendTo(self.$parent);
wasPlaying && self.video.play();
self.exitFullscreen = false;
});
}
}
@ -1189,6 +1184,7 @@ Ox.VideoPlayer = function(options, self) {
function toggleScale() {
self.options.scaleToFill = !self.options.scaleToFill;
self.$video.animate(getCSS('video'), 250);
self.$poster && self.$poster.animate(getCSS('poster'), 250);
}
function toggleSize() {