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

adding missing files (video demo)

Browse source
This commit is contained in:
rolux 2011-05-15 10:35:00 +02:00
parent cc748127bb
commit 0642c10951
3 changed files with 155 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
demos/video/js/video.js
View file

@ -3,7 +3,7 @@ Ox.load('UI', {
theme: 'modern' theme: 'modern'
}, function() { }, function() {
var id = '0393109', var id = '0393109',
poster = 'http://next.0xdb.org/' + id + '/poster.jpg', poster = 'png/poster.png',
timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png', timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png',
url = 'http://next.0xdb.org/' + id + '/96p.webm', url = 'http://next.0xdb.org/' + id + '/96p.webm',
videoSize = getVideoSize(), videoSize = getVideoSize(),
@ -32,7 +32,7 @@ Ox.load('UI', {
}), }),
Ox.VideoPlayer({ Ox.VideoPlayer({
enableKeyboard: true, enableKeyboard: true,
height: 192, height: videoSize.height,
'in': 3128.725, 'in': 3128.725,
//keepIconVisible: true, //keepIconVisible: true,
out: 3130.725, out: 3130.725,
@ -42,7 +42,7 @@ Ox.load('UI', {
showIcon: true, showIcon: true,
timeline: timeline, timeline: timeline,
video: url + '?' + + Ox.random(1000000), video: url + '?' + + Ox.random(1000000),
width: 360 width: videoSize.width
}) })
.css({ .css({
left: '16px', left: '16px',
@ -51,7 +51,7 @@ Ox.load('UI', {
Ox.VideoPlayer({ Ox.VideoPlayer({
controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'], controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
externalControls: true, externalControls: true,
height: videoSize.height, height: 192,
'in': 3128.725, 'in': 3128.725,
out: 3130.725, out: 3130.725,
paused: true, paused: true,
@ -59,7 +59,7 @@ Ox.load('UI', {
subtitles: 'srt/' + id + '.srt', subtitles: 'srt/' + id + '.srt',
timeline: timeline, timeline: timeline,
video: url + '?' + + Ox.random(1000000), video: url + '?' + + Ox.random(1000000),
width: videoSize.width width: 360
}) })
.css({ .css({
left: '16px', left: '16px',

BIN
demos/video/png/poster.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

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

@ -130,20 +130,23 @@ Ox.VideoPlayer = function(options, self) {
if (self.options.enableKeyboard) { if (self.options.enableKeyboard) {
that.bindEvent({ that.bindEvent({
key_1: function() {
toggleScale();
},
key_left: function() { key_left: function() {
setPosition(self.options.position - self.secondsPerFrame); setPosition(self.options.position - self.secondsPerFrame, true);
self.video.currentTime = self.options.position; },
key_p: function() {
playInToOut();
}, },
key_right: function() { key_right: function() {
setPosition(self.options.position + self.secondsPerFrame); setPosition(self.options.position + self.secondsPerFrame, true);
self.video.currentTime = self.options.position;
}, },
key_shift_f: function() { key_shift_f: function() {
toggleFullscreen(); toggleFullscreen();
}, },
key_space: function() { key_space: function() {
self.$playButton && self.$playButton.toggleTitle(); togglePaused(true);
togglePaused();
} }
}) })
} }
@ -192,8 +195,7 @@ Ox.VideoPlayer = function(options, self) {
}) })
.bind({ .bind({
click: function() { click: function() {
togglePaused(); togglePaused(true);
self.$playButton && self.$playButton.toggleTitle();
} }
}) })
.appendTo(that.$element) .appendTo(that.$element)
@ -357,7 +359,9 @@ Ox.VideoPlayer = function(options, self) {
type: 'image' type: 'image'
}) })
.css({float: 'left'}) .css({float: 'left'})
.bindEvent('click', togglePaused) .bindEvent('click', function() {
togglePaused();
})
.appendTo(self.$controls); .appendTo(self.$controls);
} else if (control == 'playInToOut') { } else if (control == 'playInToOut') {
@ -549,8 +553,7 @@ Ox.VideoPlayer = function(options, self) {
click: function() { click: function() {
if (!self.options.paused) { if (!self.options.paused) {
self.wasPlaying = true; self.wasPlaying = true;
togglePaused(); togglePaused(true);
self.$playButton && self.$playButton.toggleTitle();
} }
self.$position.hide(); self.$position.hide();
self.$positionInput self.$positionInput
@ -617,8 +620,7 @@ Ox.VideoPlayer = function(options, self) {
function ended() { function ended() {
if (!self.options.paused) { if (!self.options.paused) {
togglePaused(); togglePaused(true);
self.$playButton && self.$playButton.toggleTitle();
} }
if (self.options.poster) { if (self.options.poster) {
self.$poster.animate({ self.$poster.animate({
@ -639,6 +641,119 @@ Ox.VideoPlayer = function(options, self) {
return Ox.formatDuration(position, self.options.showMilliseconds); return Ox.formatDuration(position, self.options.showMilliseconds);
} }
function getCSS(element) {
var css;
if (element == 'controls' || element == 'titlebar') {
css = {
width: self.width + 'px'
};
} else if (element == 'loadingIcon') {
css = {
left: self.iconLeft + 'px',
top: self.iconTop + 'px',
width: self.iconSize + 'px',
height: self.iconSize + 'px'
};
} else if (element == 'logo') {
var logoHeight = Math.round(self.height / 10);
self.logoMargin = Math.round(self.height / 20);
css = {
left: self.logoMargin + 'px',
top: self.logoMargin + 'px',
height: logoHeight + 'px',
};
} else if (element == 'player') {
css = Ox.extend({
width: self.width + 'px',
height: (self.options.fullscreen
? window.innerHeight
: self.height + (
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;
css = {
left: self.iconLeft + 'px',
top: self.iconTop + 'px',
width: playIconSize + 'px',
height: playIconSize + 'px',
padding: playIconPadding + 'px',
borderRadius: Math.round(self.iconSize / 2) + 'px'
};
} else if (element == 'positionMarker') {
var position = self.options.duration ?
(self.options.position - self['in']) / self.options.duration : 0;
css = {
marginLeft: position * self.timelineImageWidth -
self.timelineImageWidth - 8 + 'px',
};
} else if (element == 'poster' || element == 'video') {
var playerWidth = self.width,
playerHeight = self.height,
playerRatio = playerWidth / playerHeight,
videoWidth = self.video.videoWidth,
videoHeight = self.video.videoHeight,
videoRatio = videoWidth / videoHeight,
videoIsWider = videoRatio > playerRatio,
width, height;
if (self.options.scaleToFill) {
width = videoIsWider ? playerHeight * videoRatio : playerWidth;
height = videoIsWider ? playerHeight : playerWidth / videoRatio;
} else {
width = videoIsWider ? playerWidth : playerHeight * videoRatio;
height = videoIsWider ? playerWidth / videoRatio : playerHeight;
}
width = Math.round(width);
height = Math.round(height);
css = {
width: width + 'px',
height: height + 'px',
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',
height: self.height + 'px'
};
}
return css;
}
function getPosition(e) { function getPosition(e) {
// fixme: no offsetX in firefox??? // fixme: no offsetX in firefox???
if ($.browser.mozilla) { if ($.browser.mozilla) {
@ -769,8 +884,7 @@ Ox.VideoPlayer = function(options, self) {
} }
function dragTrack(e) { function dragTrack(e) {
setPosition(getPosition(e)); setPosition(getPosition(e), true);
self.video.currentTime = self.options.position;
if (self.dragTimeout) { if (self.dragTimeout) {
clearTimeout(self.dragTimeout); clearTimeout(self.dragTimeout);
self.dragTimeout = 0; self.dragTimeout = 0;
@ -782,8 +896,7 @@ Ox.VideoPlayer = function(options, self) {
} }
function mousedownTrack(e) { function mousedownTrack(e) {
setPosition(getPosition(e)); setPosition(getPosition(e), true);
self.video.currentTime = self.options.position;
} }
function mouseleaveTrack(e) { function mouseleaveTrack(e) {
@ -812,26 +925,20 @@ Ox.VideoPlayer = function(options, self) {
(self.options.playInToOut || self.playInToOut) && (self.options.playInToOut || self.playInToOut) &&
self.options.position >= self.options.out self.options.position >= self.options.out
) { ) {
///* togglePaused(true);
togglePaused(); setPosition(self.options.out/*, true*/);
setPosition(self.options.out);
//self.video.currentTime = self.options.position;
self.$playButton && self.$playButton.toggleTitle();
//*/
//ended(); //ended();
self.playInToOut = false; self.playInToOut = false;
} else { } else {
setPosition(); setPosition(self.options.position);
} }
} }
function playInToOut() { function playInToOut() {
self.playInToOut = true; self.playInToOut = true;
setPosition(self.options['in']); setPosition(self.options['in'], true);
self.video.currentTime = self.options['in'];
if (self.options.paused) { if (self.options.paused) {
togglePaused(); togglePaused(true);
self.$playButton && self.$playButton.toggleTitle();
} }
} }
@ -862,13 +969,14 @@ Ox.VideoPlayer = function(options, self) {
}, 250); }, 250);
} }
function setPosition(position) { function setPosition(position, setVideo) {
if (!Ox.isUndefined(position)) { position = Ox.limit(position, self['in'], self['out']);
self.options.position = Ox.limit(position, self['in'], self['out']);
}
self.options.position = Math.round( self.options.position = Math.round(
self.options.position * self.options.fps position * self.options.fps
) / self.options.fps; ) / self.options.fps;
if (setVideo && self.loaded) {
self.video.currentTime = self.options.position;
}
if (self.iconIsVisible) { if (self.iconIsVisible) {
self.$playIcon.animate({ self.$playIcon.animate({
opacity: 0 opacity: 0
@ -886,119 +994,6 @@ Ox.VideoPlayer = function(options, self) {
self.$position && self.$position.html(formatPosition()); self.$position && self.$position.html(formatPosition());
} }
function getCSS(element) {
var css;
if (element == 'controls' || element == 'titlebar') {
css = {
width: self.width + 'px'
};
} else if (element == 'loadingIcon') {
css = {
left: self.iconLeft + 'px',
top: self.iconTop + 'px',
width: self.iconSize + 'px',
height: self.iconSize + 'px'
};
} else if (element == 'logo') {
var logoHeight = Math.round(self.height / 10);
self.logoMargin = Math.round(self.height / 20);
css = {
left: self.logoMargin + 'px',
top: self.logoMargin + 'px',
height: logoHeight + 'px',
};
} else if (element == 'player') {
css = Ox.extend({
width: self.width + 'px',
height: (self.options.fullscreen
? window.innerHeight
: self.height + (
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;
css = {
left: self.iconLeft + 'px',
top: self.iconTop + 'px',
width: playIconSize + 'px',
height: playIconSize + 'px',
padding: playIconPadding + 'px',
borderRadius: Math.round(self.iconSize / 2) + 'px'
};
} else if (element == 'positionMarker') {
var position = self.options.duration ?
(self.options.position - self['in']) / self.options.duration : 0;
css = {
marginLeft: position * self.timelineImageWidth -
self.timelineImageWidth - 8 + 'px',
};
} else if (element == 'poster' || element == 'video') {
var playerWidth = self.width,
playerHeight = self.height,
playerRatio = playerWidth / playerHeight,
videoWidth = self.video.videoWidth,
videoHeight = self.video.videoHeight,
videoRatio = videoWidth / videoHeight,
videoIsWider = videoRatio > playerRatio,
width, height;
if (self.options.scaleToFill) {
width = videoIsWider ? playerHeight * videoRatio : playerWidth;
height = videoIsWider ? playerHeight : playerWidth / videoRatio;
} else {
width = videoIsWider ? playerWidth : playerHeight * videoRatio;
height = videoIsWider ? playerWidth / videoRatio : playerHeight;
}
width = Math.round(width);
height = Math.round(height);
css = {
width: width + 'px',
height: height + 'px',
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',
height: self.height + 'px'
};
}
return css;
}
function setSizes(callback) { function setSizes(callback) {
var ms = callback ? 250 : 0; var ms = callback ? 250 : 0;
self.width = self.options.fullscreen ? window.innerWidth : self.options.width; self.width = self.options.fullscreen ? window.innerWidth : self.options.width;
@ -1087,14 +1082,10 @@ Ox.VideoPlayer = function(options, self) {
function submitPositionInput() { function submitPositionInput() {
self.$positionInput.hide(); self.$positionInput.hide();
self.$position.html('').show(); self.$position.html('').show();
setPosition(parsePositionInput(self.$positionInput.options('value'))); setPosition(parsePositionInput(self.$positionInput.options('value')), true);
if (self.loaded) {
self.video.currentTime = self.options.position;
}
if (self.wasPlaying) { if (self.wasPlaying) {
togglePaused(); togglePaused(true);
self.video.play(); self.video.play();
self.$playButton && self.$playButton.toggleTitle();
self.wasPlaying = false; self.wasPlaying = false;
} }
} }
@ -1144,7 +1135,7 @@ Ox.VideoPlayer = function(options, self) {
self.video.muted = self.options.muted; self.video.muted = self.options.muted;
} }
function togglePaused() { function togglePaused(togglePlayButton) {
self.options.paused = !self.options.paused; self.options.paused = !self.options.paused;
self.$timeline && self.$positionMarkerRing.css({ self.$timeline && self.$positionMarkerRing.css({
borderColor: 'rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')' borderColor: 'rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')'
@ -1160,8 +1151,7 @@ Ox.VideoPlayer = function(options, self) {
} }
} else { } else {
if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) { if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) {
setPosition(self.options['in']); setPosition(self.options['in'], true);
self.video.currentTime = self.options.position;
} }
self.video.play(); self.video.play();
self.playInterval = setInterval(playing, self.millisecondsPerFrame); self.playInterval = setInterval(playing, self.millisecondsPerFrame);
@ -1171,6 +1161,9 @@ Ox.VideoPlayer = function(options, self) {
}, 250, togglePlayIcon); }, 250, togglePlayIcon);
} }
} }
if (togglePlayButton && self.$playButton) {
self.$playButton.toggleTitle();
}
} }
function togglePlayIcon() { function togglePlayIcon() {
@ -1203,9 +1196,9 @@ Ox.VideoPlayer = function(options, self) {
toggleMuted(); toggleMuted();
self.$muteButton && self.$muteButton.toggleTitle(); self.$muteButton && self.$muteButton.toggleTitle();
} else if (key == 'paused') { } else if (key == 'paused') {
togglePaused(); togglePaused(true);
} else if (key == 'position') { } else if (key == 'position') {
setPosition(); setPosition(value);
} else if (key == 'scaleToFill') { } else if (key == 'scaleToFill') {
self.$video.css(getVideoCSS()); self.$video.css(getVideoCSS());
} }