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

add video editor demo

Browse source
This commit is contained in:
rolux 2011-05-18 18:00:29 +02:00
parent 8fe529df81
commit f8ec3fccf4
8 changed files with 5947 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
demos/video/js/video.js
View file

@ -65,6 +65,7 @@ Ox.load('UI', {
left: '16px', left: '16px',
top: '16px' top: '16px'
}), }),
/*
Ox.VideoPlayer({ Ox.VideoPlayer({
enableKeyboard: true, enableKeyboard: true,
height: videoSize.height, height: videoSize.height,
@ -83,8 +84,26 @@ Ox.load('UI', {
left: '16px', left: '16px',
top: '16px' top: '16px'
}), }),
*/
Ox.VideoPlayer({
controlsBottom: ['goto', 'set', 'space', 'position'],
externalControls: true,
height: videoSize.height,
position: 3128.72,
showMarkers: true,
showMilliseconds: 2,
subtitles: 'srt/' + id + '.srt',
type: 'in',
video: function(position) {
return 'png/poster.png'
},
width: videoSize.width
})
.css({
left: '16px',
top: '16px'
}),
Ox.VideoPlayer({ Ox.VideoPlayer({
controlsTop: ['fullscreen', 'title', 'find'],
controlsBottom: ['play', 'playInToOut', 'volume', 'size', 'space', 'position'], controlsBottom: ['play', 'playInToOut', 'volume', 'size', 'space', 'position'],
enableFind: true, enableFind: true,
enableFullscreen: true, enableFullscreen: true,
@ -92,9 +111,6 @@ Ox.load('UI', {
externalControls: true, externalControls: true,
height: 192, height: 192,
'in': 3128.72, 'in': 3128.72,
largeTimeline: function(i) {
return 'http://next.0xdb.org/' + id + '/timelines/timeline.64.' + i + '.png';
},
out: 3130.72, out: 3130.72,
paused: true, paused: true,
position: 3168.04, position: 3168.04,
@ -102,7 +118,6 @@ Ox.load('UI', {
showMarkers: true, showMarkers: true,
showMilliseconds: 2, showMilliseconds: 2,
subtitles: 'srt/' + id + '.srt', subtitles: 'srt/' + id + '.srt',
timeline: timeline,
title: 'Brick - Rian Johnson - 2005', title: 'Brick - Rian Johnson - 2005',
video: url + '?' + + Ox.random(1000000), video: url + '?' + + Ox.random(1000000),
width: 360 width: 360
@ -172,7 +187,7 @@ Ox.load('UI', {
$videos[2].options({height: size - 48}); $videos[2].options({height: size - 48});
} }
}), }),
size: 320, size: 240,
resizable: true, resizable: true,
resize: [100, 400] resize: [100, 400]
}, },
@ -253,14 +268,14 @@ Ox.load('UI', {
$blockTimeline = Ox.BlockVideoTimeline({ $blockTimeline = Ox.BlockVideoTimeline({
duration: 6336.08, duration: 6336.08,
find: 'brick', find: 'brick',
getImageURL: function(i) {
return 'png/timeline.16.' + i + '.png';
},
'in': 3128.725, 'in': 3128.725,
out: 3130.725, out: 3130.725,
results: results, results: results,
showMilliseconds: 2, showMilliseconds: 2,
subtitles: subtitles, subtitles: subtitles,
timeline: function(i) {
return 'png/timeline.16.' + i + '.png';
},
width: 376 width: 376
}) })
.css({ .css({

10
demos/videoeditor/index.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<title>OxJS Video Editor Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script type="text/javascript" src="js/videoeditor.js"></script>
</head>
<body></body>
</html>

88
demos/videoeditor/js/videoeditor.js Normal file
View file

@ -0,0 +1,88 @@
Ox.load('UI', {
debug: true,
theme: 'modern'
}, function() {
Ox.get('srt/0393109.srt', function(srt) {
var subtitles = Ox.parseSRT(srt);
var $videoEditor = Ox.VideoEditor({
annotationsSize: 256,
duration: 6336.08,
find: 'dode',
getLargeTimelineImageURL: function(i) {
return 'http://next.0xdb.org/0393109/timelines/timeline.64.' + i + '.png';
},
getSmallTimelineImageURL: function(i) {
return 'http://next.0xdb.org/0393109/timelines/timeline.16.' + i + '.png';
},
getVideoImageURL: function(i) {
return 'png/0393109.png';
},
height: window.innerHeight - 129,
'in': 3128.76,
out: 3130.72,
position: 3168.04,
posterFrame: 3168.04,
subtitles: subtitles,
video: {
96: 'http://next.0xdb.org/0393109/96p.webm',
240: 'http://next.0xdb.org/0393109/96p.webm?240p',
480: 'http://next.0xdb.org/0393109/96p.webm?480p'
},
videoHeight: 96,
videoWidth: 180,
width: window.innerWidth - 257
});
Ox.SplitPanel({
elements: [
{
collapsible: true,
element: Ox.Element(),
resizable: true,
resize: [128, 256, 384],
size: 256
},
{
element: Ox.SplitPanel({
elements: [
{
collapsible: true,
element: Ox.Element(),
resizable: true,
resize: [64, 128, 192],
size: 128
},
{
element: $videoEditor
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(foo, size) {
$videoEditor.options({
width: size
});
}
})
}
],
orientation: 'horizontal'
})
.appendTo(Ox.UI.$body);
$videoEditor.$element.bindEvent({
resize: function(foo, size) {
Ox.print('HHHHHHHHH', foo, size)
$videoEditor.options({
height: size
});
}
});
});
});

BIN
demos/videoeditor/png/0393109.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

5560
demos/videoeditor/srt/0393109.srt Normal file
View file

File diff suppressed because it is too large Load diff

8
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -5,12 +5,12 @@ Ox.BlockVideoTimeline = function(options, self) {
.defaults({ .defaults({
duration: 0, duration: 0,
find: '', find: '',
getImageURL: null,
'in': 0, 'in': 0,
out: 0, out: 0,
position: 0, position: 0,
results: [], results: [],
subtitles: [], subtitles: [],
timeline: null,
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
@ -50,7 +50,7 @@ Ox.BlockVideoTimeline = function(options, self) {
out: self.options.out, out: self.options.out,
results: self.options.results, results: self.options.results,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
timeline: self.options.timeline, timeline: self.options.getImageURL,
width: Math.ceil(self.options.duration), width: Math.ceil(self.options.duration),
type: self.options.type type: self.options.type
}); });
@ -189,7 +189,9 @@ Ox.BlockVideoTimeline = function(options, self) {
function setCSS() { function setCSS() {
that.css({ that.css({
width: (self.options.width + self.margin) + 'px', width: (self.options.width + self.margin) + 'px',
height: ((self.height + self.margin) * self.lines) + 'px' height: ((self.height + self.margin) * self.lines) + 4 + 'px'
// fixme: the + 4 represent the margin-bottom in the video editor
// is there a better way to get a proper margin-bottom?
}); });
} }

119
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -19,12 +19,15 @@ Ox.VideoEditor = function(options, self) {
duration: 0, duration: 0,
find: '', find: '',
frameURL: function() {}, frameURL: function() {},
fps: 25, // fixme: doesn't get handed through to player fps: 25,
getLargeTimelineImageURL: null,
getSmallTimelineImageURL: null,
getVideoImageURL: null,
'in': 0,
height: 0, height: 0,
largeTimeline: true, largeTimeline: true,
layers: [], layers: [],
matches: [], out: 0,
points: [0, 0],
position: 0, position: 0,
posterFrame: 0, posterFrame: 0,
showAnnotations: false, showAnnotations: false,
@ -41,6 +44,7 @@ Ox.VideoEditor = function(options, self) {
that.gainFocus(); that.gainFocus();
}) })
.bindEvent({ .bindEvent({
key_0: toggleMuted,
key_shift_0: function() { key_shift_0: function() {
movePositionBy(-self.options.position); movePositionBy(-self.options.position);
}, },
@ -73,7 +77,6 @@ Ox.VideoEditor = function(options, self) {
key_left: function() { key_left: function() {
movePositionBy(-1); movePositionBy(-1);
}, },
key_m: toggleMute,
key_o: function() { key_o: function() {
setPoint('out'); setPoint('out');
}, },
@ -116,7 +119,7 @@ Ox.VideoEditor = function(options, self) {
key_slash: function() { key_slash: function() {
select('cut'); select('cut');
}, },
key_space: togglePlay, key_space: togglePaused,
key_up: function() { key_up: function() {
movePositionBy(-self.sizes.timeline[0].width); movePositionBy(-self.sizes.timeline[0].width);
} }
@ -139,17 +142,25 @@ Ox.VideoEditor = function(options, self) {
self.sizes = getSizes(); self.sizes = getSizes();
['play', 'in', 'out'].forEach(function(type, i) { ['play', 'in', 'out'].forEach(function(type, i) {
self.$player[i] = new Ox.VideoEditorPlayer({ self.$player[i] = new Ox.VideoPlayer({
controlsBottom: type == 'play' ?
['play', 'playInToOut', 'mute', 'size', 'space', 'position'] :
['goto', 'set', 'space', 'position'],
duration: self.options.duration, duration: self.options.duration,
externalControls: true,
find: self.options.find, find: self.options.find,
height: self.sizes.player[i].height, height: self.sizes.player[i].height,
id: 'player' + Ox.toTitleCase(type), id: 'player' + Ox.toTitleCase(type),
points: self.options.points, 'in': self.options['in'],
position: type == 'play' ? self.options.position : self.options.points[type == 'in' ? 0 : 1], out: self.options.out,
paused: true,
position: type == 'play' ? self.options.position : self.options[type],
posterFrame: self.options.posterFrame, posterFrame: self.options.posterFrame,
showMarkers: true,
showMilliseconds: 2,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
type: type, type: type,
url: type == 'play' ? self.options.videoURL : self.options.frameURL, video: type == 'play' ? self.options.video : self.options.getVideoImageURL,
width: self.sizes.player[i].width width: self.sizes.player[i].width
}) })
.css({ .css({
@ -157,46 +168,49 @@ Ox.VideoEditor = function(options, self) {
top: self.sizes.player[i].top + 'px' top: self.sizes.player[i].top + 'px'
}) })
.bindEvent(type == 'play' ? { .bindEvent(type == 'play' ? {
playing: changePlayer, position: changePlayer,
togglesize: toggleSize size: toggleSize
} : { } : {
change: function() { gotopoint: function() {
goToPoint(type); goToPoint(type);
}, },
set: function() { setpoint: function() {
setPoint(type); setPoint(type);
} }
}) })
.appendTo(self.$editor); .appendTo(self.$editor);
}); });
self.$timeline[0] = new Ox.LargeTimeline({ self.$timeline[0] = new Ox.LargeVideoTimeline({
cuts: self.options.cuts, cuts: self.options.cuts,
duration: self.options.duration, duration: self.options.duration,
find: self.options.find, find: self.options.find,
getImageURL: self.options.getLargeTimelineImageURL,
id: 'timelineLarge', id: 'timelineLarge',
matches: self.options.matches, 'in': self.options['in'],
points: self.options.points, //matches: self.options.matches,
out: self.options.out,
position: self.options.position, position: self.options.position,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
videoId: self.options.videoId, type: 'editor',
width: self.sizes.timeline[0].width width: self.sizes.timeline[0].width
}) })
.css({ .css({
left: self.sizes.timeline[0].left + 'px', left: self.sizes.timeline[0].left + 'px',
top: self.sizes.timeline[0].top + 'px' top: self.sizes.timeline[0].top + 'px'
}) })
.bindEvent('change', changeTimelineLarge) .bindEvent('position', changeTimelineLarge)
.bindEvent('changeEnd', changeTimelineLarge)
.appendTo(self.$editor); .appendTo(self.$editor);
self.$timeline[1] = new Ox.BlockTimeline({ self.$timeline[1] = new Ox.BlockVideoTimeline({
cuts: self.options.cuts, cuts: self.options.cuts,
duration: self.options.duration, duration: self.options.duration,
find: self.options.find, find: self.options.find,
getImageURL: self.options.getSmallTimelineImageURL,
id: 'timelineSmall', id: 'timelineSmall',
matches: self.options.matches, //matches: self.options.matches,
points: self.options.points, 'in': self.options['in'],
out: self.options.out,
position: self.options.position, position: self.options.position,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
videoId: self.options.videoId, videoId: self.options.videoId,
@ -204,9 +218,9 @@ Ox.VideoEditor = function(options, self) {
}) })
.css({ .css({
left: self.sizes.timeline[1].left + 'px', left: self.sizes.timeline[1].left + 'px',
top: self.sizes.timeline[1].top + 'px' top: self.sizes.timeline[1].top + 'px',
}) })
.bindEvent('change', changeTimelineSmall) .bindEvent('position', changeTimelineSmall)
.appendTo(self.$editor); .appendTo(self.$editor);
self.$annotations = new Ox.Element() self.$annotations = new Ox.Element()
@ -267,7 +281,7 @@ Ox.VideoEditor = function(options, self) {
orientation: 'horizontal' orientation: 'horizontal'
}); });
function changePlayer(event, data) { function changePlayer(data) {
self.options.position = data.position; self.options.position = data.position;
self.$timeline[0].options({ self.$timeline[0].options({
position: data.position position: data.position
@ -424,9 +438,9 @@ Ox.VideoEditor = function(options, self) {
} }
function goToPoint(point) { function goToPoint(point) {
self.options.position = self.options.points[point == 'in' ? 0 : 1]; self.options.position = self.options[point];
setPosition(); setPosition();
that.triggerEvent('change', { that.triggerEvent('position', {
position: self.options.position position: self.options.position
}); });
} }
@ -434,7 +448,7 @@ Ox.VideoEditor = function(options, self) {
function movePositionBy(sec) { function movePositionBy(sec) {
self.options.position = Ox.limit(self.options.position + sec, 0, self.options.duration); self.options.position = Ox.limit(self.options.position + sec, 0, self.options.duration);
setPosition(); setPosition();
that.triggerEvent('change', { that.triggerEvent('position', {
position: self.options.position position: self.options.position
}); });
} }
@ -442,7 +456,7 @@ Ox.VideoEditor = function(options, self) {
function movePositionTo(type, direction) { function movePositionTo(type, direction) {
self.options.position = getNextPosition(type, direction); self.options.position = getNextPosition(type, direction);
setPosition(); setPosition();
that.triggerEvent('change', { that.triggerEvent('position', {
position: self.options.position position: self.options.position
}); });
} }
@ -498,26 +512,17 @@ Ox.VideoEditor = function(options, self) {
} }
function setPoint(point) { function setPoint(point) {
self.options.points[point == 'in' ? 0 : 1] = self.options.position; self.options[point] = self.options.position;
if (self.options.points[1] < self.options.points[0]) { self.$player[0].options(point, self.options[point]);
self.options.points[point == 'in' ? 1 : 0] = self.options.position; self.$player[point == 'in' ? 1 : 2].options({
position: self.options[point]
});
self.$timeline.forEach(function($timeline) {
$timeline.options(point, self.options[point]);
});
if (self.options['in'] > self.options.out) {
setPoint(point == 'in' ? 'out' : 'in');
} }
setPoints();
}
function setPoints() {
self.$player.forEach(function(v, i) {
v.options($.extend({
points: self.options.points
}, i ? {
position: self.options.points[i - 1]
} : {}));
});
self.$timeline.forEach(function(v) {
v.options({
points: self.options.points
});
});
} }
function setPosition() { function setPosition() {
@ -533,8 +538,8 @@ Ox.VideoEditor = function(options, self) {
function setSizes() { function setSizes() {
self.sizes = getSizes(); self.sizes = getSizes();
self.$player.forEach(function(v, i) { self.$player.forEach(function($player, i) {
v.options({ $player.options({
height: self.sizes.player[i].height, height: self.sizes.player[i].height,
width: self.sizes.player[i].width width: self.sizes.player[i].width
}) })
@ -543,8 +548,8 @@ Ox.VideoEditor = function(options, self) {
top: self.sizes.player[i].top + 'px' top: self.sizes.player[i].top + 'px'
}); });
}); });
self.$timeline.forEach(function(v, i) { self.$timeline.forEach(function($timeline, i) {
v.options({ $timeline.options({
width: self.sizes.timeline[i].width width: self.sizes.timeline[i].width
}) })
.css({ .css({
@ -559,12 +564,12 @@ Ox.VideoEditor = function(options, self) {
setSizes(); setSizes();
} }
function toggleMute() { function toggleMuted() {
self.$player[0].toggleMute(); self.$player[0].toggleMuted();
} }
function togglePlay() { function togglePaused() {
self.$player[0].togglePlay(); self.$player[0].togglePaused();
} }
function toggleSize(event, data) { function toggleSize(event, data) {
@ -577,7 +582,7 @@ Ox.VideoEditor = function(options, self) {
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'width' || key == 'height') { if (key == 'width' || key == 'height') {
//Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height) Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
setSizes(); setSizes();
} else if (key == 'position') { } else if (key == 'position') {
self.$player[0].position(value); self.$player[0].position(value);

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

@ -250,37 +250,65 @@ Ox.VideoPlayer = function(options, self) {
self.$videoContainer = $('<div>') self.$videoContainer = $('<div>')
.addClass('OxVideoContainer') .addClass('OxVideoContainer')
.css({ .css({
top: self.options.externalControls && self.options.controlsTop ? '16px' : 0, top: self.options.externalControls && self.options.controlsTop.length ? '16px' : 0,
})
.bind({
click: function() {
togglePaused();
}
}) })
.appendTo(that.$element) .appendTo(that.$element)
self.$video = $('<video>') if (self.options.type == 'play') {
.attr(Ox.extend({
preload: self.options.preload, self.$videoContainer.bind({
src: self.video click: function(e) {
}, !self.options.paused ? { if (!$(e.target).is('.OxLogo')) {
autoplay: 'autoplay' togglePaused();
} : {}/*, self.options.poster ? { }
poster: self.options.poster }
} : {}*/)) });
.css({
position: 'absolute' self.$video = $('<video>')
}) .attr(Ox.extend({
.bind(Ox.extend({ preload: self.options.preload,
ended: ended, src: self.video
loadedmetadata: loadedmetadata, }, !self.options.paused ? {
seeked: seeked, autoplay: 'autoplay'
seeking: seeking } : {}/*, self.options.poster ? {
}, self.options.progress ? { poster: self.options.poster
progress: progress } : {}*/))
} : {})) .css({
.appendTo(self.$videoContainer); position: 'absolute'
self.video = self.$video[0]; })
.bind(Ox.extend({
ended: ended,
loadedmetadata: loadedmetadata,
seeked: seeked,
seeking: seeking
}, self.options.progress ? {
progress: progress
} : {}))
.appendTo(self.$videoContainer);
self.video = self.$video[0];
} else {
self.$videoContainer.bind({
click: function(e) {
if (!$(e.target).is('.OxLogo')) {
goToPoint();
}
}
});
self.$video = $('<img>')
.attr({
src: Ox.UI.PATH + 'png/transparent.png'
})
.appendTo(self.$videoContainer);
loadImage();
self.options[self.options.type] = self.options.position;
}
/* /*
---------------------------------------------------------------------------- ----------------------------------------------------------------------------
@ -458,6 +486,20 @@ Ox.VideoPlayer = function(options, self) {
}) })
.appendTo(self['$controls' + titleCase]); .appendTo(self['$controls' + titleCase]);
} else if (control == 'goto') {
self.$setButton = Ox.Button({
style: 'symbol',
title: 'goTo' + Ox.toTitleCase(self.options.type),
tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: goToPoint
})
.appendTo(self['$controls' + titleCase]);
} else if (control == 'mute') { } else if (control == 'mute') {
self.$muteButton = Ox.Button({ self.$muteButton = Ox.Button({
@ -527,14 +569,16 @@ Ox.VideoPlayer = function(options, self) {
.html(formatPosition()) .html(formatPosition())
.bind({ .bind({
click: function() { click: function() {
if (!self.options.paused) { if (self.options.type == 'play') {
self.playOnSubmit = true; if (!self.options.paused) {
togglePaused(); self.playOnSubmit = true;
} else if (self.playOnLoad) { togglePaused();
// if clicked during resolution switch, } else if (self.playOnLoad) {
// don't play on load // if clicked during resolution switch,
self.playOnLoad = false; // don't play on load
self.playOnSubmit = true; self.playOnLoad = false;
self.playOnSubmit = true;
}
} }
self.$position.hide(); self.$position.hide();
self.$positionInput self.$positionInput
@ -650,6 +694,20 @@ Ox.VideoPlayer = function(options, self) {
}) })
.appendTo(self['$controls' + titleCase]); .appendTo(self['$controls' + titleCase]);
} else if (control == 'set') {
self.$setButton = Ox.Button({
style: 'symbol',
title: 'set' + Ox.toTitleCase(self.options.type),
tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: setPoint
})
.appendTo(self['$controls' + titleCase]);
} else if (control == 'size') { } else if (control == 'size') {
self.$sizeButton = Ox.Button({ self.$sizeButton = Ox.Button({
@ -1264,6 +1322,10 @@ Ox.VideoPlayer = function(options, self) {
return Ox.UI.getImagePath('symbol' + symbol + '.svg').replace('/classic/', '/modern/'); return Ox.UI.getImagePath('symbol' + symbol + '.svg').replace('/classic/', '/modern/');
} }
function goToPoint() {
that.triggerEvent('gotopoint');
}
function hideControlMenus() { function hideControlMenus() {
['find', 'volume', 'resolution'].forEach(function(element) { ['find', 'volume', 'resolution'].forEach(function(element) {
var $element = self['$' + element]; var $element = self['$' + element];
@ -1324,6 +1386,19 @@ Ox.VideoPlayer = function(options, self) {
}); });
} }
function loadImage() {
self.$video
.one({
load: function() {
Ox.print('IMAGE LOADED', self.options.video(self.options.position))
hideLoadingIcon();
}
})
.attr({
src: self.options.video(self.options.position)
});
}
function loadedmetadata() { function loadedmetadata() {
Ox.print('LOADEDMETADATA') Ox.print('LOADEDMETADATA')
@ -1472,32 +1547,41 @@ Ox.VideoPlayer = function(options, self) {
}); });
} }
function setPoint() {
that.triggerEvent('setpoint');
}
function setPosition(position, from) { function setPosition(position, from) {
position = Ox.limit(position, self['in'], self['out']); position = Ox.limit(position, self['in'], self['out']);
self.options.position = Math.round( self.options.position = Math.round(
position * self.options.fps position * self.options.fps
) / self.options.fps; ) / self.options.fps;
if (self.loadedMetadata && from != 'video') {
self.video.currentTime = self.options.position;
}
if (self.iconIsVisible) {
self.$playIcon.animate({
opacity: 0
}, 250);
self.iconIsVisible = false;
}
if (self.posterIsVisible) {
self.$poster.animate({
opacity: 0
}, 250);
self.posterIsVisible = false;
}
self.options.paused && self.options.showMarkers && setMarkers(); self.options.paused && self.options.showMarkers && setMarkers();
self.$subtitle && setSubtitle(); self.$subtitle && setSubtitle();
self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({
position: self.options.position
});
self.$position && self.$position.html(formatPosition()); self.$position && self.$position.html(formatPosition());
if (self.options.type == 'play') {
if (self.loadedMetadata && from != 'video') {
self.video.currentTime = self.options.position;
}
if (self.iconIsVisible) {
self.$playIcon.animate({
opacity: 0
}, 250);
self.iconIsVisible = false;
}
if (self.posterIsVisible) {
self.$poster.animate({
opacity: 0
}, 250);
self.posterIsVisible = false;
}
self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({
position: self.options.position
});
} else {
//showLoadingIcon();
loadImage();
}
} }
function setResolution() { function setResolution() {
@ -1513,8 +1597,21 @@ Ox.VideoPlayer = function(options, self) {
}); });
} }
function setSize($element, css, animate, callback) {
if ($element) {
if (animate) {
$element.animate(css, 250, function() {
callback && callback();
});
} else {
$element.css(css);
callback && callback();
}
}
}
function setSizes(callback) { function setSizes(callback) {
var ms = callback ? 250 : 0; var animate = !!callback;
self.width = self.options.fullscreen ? window.innerWidth : self.options.width; self.width = self.options.fullscreen ? window.innerWidth : self.options.width;
self.height = self.options.fullscreen ? window.innerHeight : self.options.height; self.height = self.options.fullscreen ? window.innerHeight : self.options.height;
self.videoCSS = getVideoCSS(); self.videoCSS = getVideoCSS();
@ -1525,42 +1622,38 @@ Ox.VideoPlayer = function(options, self) {
self.timelineImageWidth = self.timelineWidth - self.barHeight; self.timelineImageWidth = self.timelineWidth - self.barHeight;
} }
} }
that.animate(getCSS('player'), ms, callback); setSize(that, getCSS('player'), animate, callback);
self.$videoContainer.animate(getCSS('videoContainer'), ms); setSize(self.$videoContainer, getCSS('videoContainer'), animate);
self.$video.animate(self.videoCSS, ms); setSize(self.$video, self.videoCSS, animate);
self.$poster && self.$poster.animate(self.videoCSS, ms); setSize(self.$poster, self.videoCSS, animate);
self.$logo && self.$logo.animate(getCSS('logo'), ms); setSize(self.$logo, getCSS('logo'), animate);
self.$loadingIcon.animate(getCSS('loadingIcon'), ms); setSize(self.$loadingIcon, getCSS('loadingIcon'), animate);
self.$playIcon && self.$playIcon.animate(getCSS('playIcon'), ms); setSize(self.$playIcon, getCSS('playIcon'), animate);
self.$subtitle && self.$subtitle.animate(getCSS('subtitle'), ms); setSize(self.$subtitle, getCSS('subtitle'), animate);
self.$controlsTop && self.$controlsTop.animate(getCSS('controlsTop'), ms); setSize(self.$controlsTop, getCSS('controlsTop'), animate);
self.$title && self.$title.animate(getCSS('title'), ms); setSize(self.$title, getCSS('title'), animate);
self.$spaceTop && self.$spaceTop.animate(getCSS('spaceTop'), ms); setSize(self.$spaceTop, getCSS('spaceTop'), animate);
self.$controlsBottom && self.$controlsBottom.animate(getCSS('controlsBottom'), ms); setSize(self.$controlsBottom, getCSS('controlsBottom'), animate);
if (self.$timeline) { setSize(self.$timeline, getCSS('timeline'), animate, function() {
self.$timeline.animate(getCSS('timeline'), ms, function() { self.$timeline.options({
self.$timeline.options({ width: self.timelineWidth
width: self.timelineWidth
})
}); });
} });
self.$spaceBottom && self.$spaceBottom.animate(getCSS('spaceBottom'), ms); setSize(self.$spaceBottom, getCSS('spaceBottom'), animate);
if (self.$find) { setSize(self.$find, getCSS('find'), animate, function() {
self.$find.animate(getCSS('find'), ms);
self.$findInput.options({ self.$findInput.options({
width: Math.min(128, self.width - 80) width: Math.min(128, self.width - 80)
}); });
} });
if (self.$volume) { setSize(self.$volume, getCSS('volume'), animate, function() {
self.$volume.animate(getCSS('volume'), ms);
self.$volumeInput.options({ self.$volumeInput.options({
size: Math.min(128, self.width - 56) // fixme: should be width in Ox.Range size: Math.min(128, self.width - 56)
}); });
} });
if (self.$posterMarker) { if (self.$posterMarker) {
self.posterMarkerCSS = getPosterMarkerCSS(); self.posterMarkerCSS = getPosterMarkerCSS();
Ox.forEach(self.$posterMarker, function(marker, position) { Ox.forEach(self.$posterMarker, function(marker, position) {
marker.animate(self.posterMarkerCSS[position], ms); setSize(marker, self.posterMarkerCSS[position], animate);
}); });
} }
} }
@ -1673,17 +1766,19 @@ Ox.VideoPlayer = function(options, self) {
Ox.print('submitFindInput', value, hasPressedEnter) Ox.print('submitFindInput', value, hasPressedEnter)
self.options.find = value; self.options.find = value;
self.results = find(self.options.find, hasPressedEnter); self.results = find(self.options.find, hasPressedEnter);
Ox.print('results', self.results.length) Ox.print('results', self.results.length);
self.$results.html(self.results.length); if (self.$find) {
self.$previousButton.options({ self.$results.html(self.results.length);
disabled: self.results.length <= 1 self.$previousButton.options({
}); disabled: self.results.length <= 1
self.$nextButton.options({ });
disabled: self.results.length <= 1 self.$nextButton.options({
}); disabled: self.results.length <= 1
self.$clearButton.options({ });
disabled: !self.options.find self.$clearButton.options({
}); disabled: !self.options.find
});
}
self.subtitle && setSubtitleText(); self.subtitle && setSubtitleText();
self.$timeline && self.$timeline.options({ self.$timeline && self.$timeline.options({
find: self.options.find, find: self.options.find,
@ -1915,6 +2010,16 @@ Ox.VideoPlayer = function(options, self) {
return that; return that;
}; };
that.togglePaused = function() {
togglePaused();
return that;
}
that.toggleMuted = function() {
toggleMuted();
return that;
}
return that; return that;
}; };