add video editor demo
This commit is contained in:
rolux
parent
8fe529df81
commit
f8ec3fccf4
8 changed files with 5947 additions and 162 deletions
|
|
@ -65,6 +65,7 @@ Ox.load('UI', {
|
|||
left: '16px',
|
||||
top: '16px'
|
||||
}),
|
||||
/*
|
||||
Ox.VideoPlayer({
|
||||
enableKeyboard: true,
|
||||
height: videoSize.height,
|
||||
|
|
@ -83,8 +84,26 @@ Ox.load('UI', {
|
|||
left: '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({
|
||||
controlsTop: ['fullscreen', 'title', 'find'],
|
||||
controlsBottom: ['play', 'playInToOut', 'volume', 'size', 'space', 'position'],
|
||||
enableFind: true,
|
||||
enableFullscreen: true,
|
||||
|
|
@ -92,9 +111,6 @@ Ox.load('UI', {
|
|||
externalControls: true,
|
||||
height: 192,
|
||||
'in': 3128.72,
|
||||
largeTimeline: function(i) {
|
||||
return 'http://next.0xdb.org/' + id + '/timelines/timeline.64.' + i + '.png';
|
||||
},
|
||||
out: 3130.72,
|
||||
paused: true,
|
||||
position: 3168.04,
|
||||
|
|
@ -102,7 +118,6 @@ Ox.load('UI', {
|
|||
showMarkers: true,
|
||||
showMilliseconds: 2,
|
||||
subtitles: 'srt/' + id + '.srt',
|
||||
timeline: timeline,
|
||||
title: 'Brick - Rian Johnson - 2005',
|
||||
video: url + '?' + + Ox.random(1000000),
|
||||
width: 360
|
||||
|
|
@ -172,7 +187,7 @@ Ox.load('UI', {
|
|||
$videos[2].options({height: size - 48});
|
||||
}
|
||||
}),
|
||||
size: 320,
|
||||
size: 240,
|
||||
resizable: true,
|
||||
resize: [100, 400]
|
||||
},
|
||||
|
|
@ -253,14 +268,14 @@ Ox.load('UI', {
|
|||
$blockTimeline = Ox.BlockVideoTimeline({
|
||||
duration: 6336.08,
|
||||
find: 'brick',
|
||||
getImageURL: function(i) {
|
||||
return 'png/timeline.16.' + i + '.png';
|
||||
},
|
||||
'in': 3128.725,
|
||||
out: 3130.725,
|
||||
results: results,
|
||||
showMilliseconds: 2,
|
||||
subtitles: subtitles,
|
||||
timeline: function(i) {
|
||||
return 'png/timeline.16.' + i + '.png';
|
||||
},
|
||||
width: 376
|
||||
})
|
||||
.css({
|
||||
|
|
|
|||
10
demos/videoeditor/index.html
Normal file
10
demos/videoeditor/index.html
Normal 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
88
demos/videoeditor/js/videoeditor.js
Normal 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
BIN
demos/videoeditor/png/0393109.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
5560
demos/videoeditor/srt/0393109.srt
Normal file
5560
demos/videoeditor/srt/0393109.srt
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -5,12 +5,12 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
.defaults({
|
||||
duration: 0,
|
||||
find: '',
|
||||
getImageURL: null,
|
||||
'in': 0,
|
||||
out: 0,
|
||||
position: 0,
|
||||
results: [],
|
||||
subtitles: [],
|
||||
timeline: null,
|
||||
width: 0
|
||||
})
|
||||
.options(options || {})
|
||||
|
|
@ -50,7 +50,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
out: self.options.out,
|
||||
results: self.options.results,
|
||||
subtitles: self.options.subtitles,
|
||||
timeline: self.options.timeline,
|
||||
timeline: self.options.getImageURL,
|
||||
width: Math.ceil(self.options.duration),
|
||||
type: self.options.type
|
||||
});
|
||||
|
|
@ -189,7 +189,9 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
function setCSS() {
|
||||
that.css({
|
||||
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?
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,12 +19,15 @@ Ox.VideoEditor = function(options, self) {
|
|||
duration: 0,
|
||||
find: '',
|
||||
frameURL: function() {},
|
||||
fps: 25, // fixme: doesn't get handed through to player
|
||||
fps: 25,
|
||||
getLargeTimelineImageURL: null,
|
||||
getSmallTimelineImageURL: null,
|
||||
getVideoImageURL: null,
|
||||
'in': 0,
|
||||
height: 0,
|
||||
largeTimeline: true,
|
||||
layers: [],
|
||||
matches: [],
|
||||
points: [0, 0],
|
||||
out: 0,
|
||||
position: 0,
|
||||
posterFrame: 0,
|
||||
showAnnotations: false,
|
||||
|
|
@ -41,6 +44,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
that.gainFocus();
|
||||
})
|
||||
.bindEvent({
|
||||
key_0: toggleMuted,
|
||||
key_shift_0: function() {
|
||||
movePositionBy(-self.options.position);
|
||||
},
|
||||
|
|
@ -73,7 +77,6 @@ Ox.VideoEditor = function(options, self) {
|
|||
key_left: function() {
|
||||
movePositionBy(-1);
|
||||
},
|
||||
key_m: toggleMute,
|
||||
key_o: function() {
|
||||
setPoint('out');
|
||||
},
|
||||
|
|
@ -116,7 +119,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
key_slash: function() {
|
||||
select('cut');
|
||||
},
|
||||
key_space: togglePlay,
|
||||
key_space: togglePaused,
|
||||
key_up: function() {
|
||||
movePositionBy(-self.sizes.timeline[0].width);
|
||||
}
|
||||
|
|
@ -139,17 +142,25 @@ Ox.VideoEditor = function(options, self) {
|
|||
self.sizes = getSizes();
|
||||
|
||||
['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,
|
||||
externalControls: true,
|
||||
find: self.options.find,
|
||||
height: self.sizes.player[i].height,
|
||||
id: 'player' + Ox.toTitleCase(type),
|
||||
points: self.options.points,
|
||||
position: type == 'play' ? self.options.position : self.options.points[type == 'in' ? 0 : 1],
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
paused: true,
|
||||
position: type == 'play' ? self.options.position : self.options[type],
|
||||
posterFrame: self.options.posterFrame,
|
||||
showMarkers: true,
|
||||
showMilliseconds: 2,
|
||||
subtitles: self.options.subtitles,
|
||||
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
|
||||
})
|
||||
.css({
|
||||
|
|
@ -157,46 +168,49 @@ Ox.VideoEditor = function(options, self) {
|
|||
top: self.sizes.player[i].top + 'px'
|
||||
})
|
||||
.bindEvent(type == 'play' ? {
|
||||
playing: changePlayer,
|
||||
togglesize: toggleSize
|
||||
position: changePlayer,
|
||||
size: toggleSize
|
||||
} : {
|
||||
change: function() {
|
||||
gotopoint: function() {
|
||||
goToPoint(type);
|
||||
},
|
||||
set: function() {
|
||||
setpoint: function() {
|
||||
setPoint(type);
|
||||
}
|
||||
})
|
||||
.appendTo(self.$editor);
|
||||
});
|
||||
|
||||
self.$timeline[0] = new Ox.LargeTimeline({
|
||||
self.$timeline[0] = new Ox.LargeVideoTimeline({
|
||||
cuts: self.options.cuts,
|
||||
duration: self.options.duration,
|
||||
find: self.options.find,
|
||||
getImageURL: self.options.getLargeTimelineImageURL,
|
||||
id: 'timelineLarge',
|
||||
matches: self.options.matches,
|
||||
points: self.options.points,
|
||||
'in': self.options['in'],
|
||||
//matches: self.options.matches,
|
||||
out: self.options.out,
|
||||
position: self.options.position,
|
||||
subtitles: self.options.subtitles,
|
||||
videoId: self.options.videoId,
|
||||
type: 'editor',
|
||||
width: self.sizes.timeline[0].width
|
||||
})
|
||||
.css({
|
||||
left: self.sizes.timeline[0].left + 'px',
|
||||
top: self.sizes.timeline[0].top + 'px'
|
||||
})
|
||||
.bindEvent('change', changeTimelineLarge)
|
||||
.bindEvent('changeEnd', changeTimelineLarge)
|
||||
.bindEvent('position', changeTimelineLarge)
|
||||
.appendTo(self.$editor);
|
||||
|
||||
self.$timeline[1] = new Ox.BlockTimeline({
|
||||
self.$timeline[1] = new Ox.BlockVideoTimeline({
|
||||
cuts: self.options.cuts,
|
||||
duration: self.options.duration,
|
||||
find: self.options.find,
|
||||
getImageURL: self.options.getSmallTimelineImageURL,
|
||||
id: 'timelineSmall',
|
||||
matches: self.options.matches,
|
||||
points: self.options.points,
|
||||
//matches: self.options.matches,
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
position: self.options.position,
|
||||
subtitles: self.options.subtitles,
|
||||
videoId: self.options.videoId,
|
||||
|
|
@ -204,9 +218,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
})
|
||||
.css({
|
||||
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);
|
||||
|
||||
self.$annotations = new Ox.Element()
|
||||
|
|
@ -267,7 +281,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
orientation: 'horizontal'
|
||||
});
|
||||
|
||||
function changePlayer(event, data) {
|
||||
function changePlayer(data) {
|
||||
self.options.position = data.position;
|
||||
self.$timeline[0].options({
|
||||
position: data.position
|
||||
|
|
@ -424,9 +438,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function goToPoint(point) {
|
||||
self.options.position = self.options.points[point == 'in' ? 0 : 1];
|
||||
self.options.position = self.options[point];
|
||||
setPosition();
|
||||
that.triggerEvent('change', {
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
}
|
||||
|
|
@ -434,7 +448,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
function movePositionBy(sec) {
|
||||
self.options.position = Ox.limit(self.options.position + sec, 0, self.options.duration);
|
||||
setPosition();
|
||||
that.triggerEvent('change', {
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
}
|
||||
|
|
@ -442,7 +456,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
function movePositionTo(type, direction) {
|
||||
self.options.position = getNextPosition(type, direction);
|
||||
setPosition();
|
||||
that.triggerEvent('change', {
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
}
|
||||
|
|
@ -498,26 +512,17 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function setPoint(point) {
|
||||
self.options.points[point == 'in' ? 0 : 1] = self.options.position;
|
||||
if (self.options.points[1] < self.options.points[0]) {
|
||||
self.options.points[point == 'in' ? 1 : 0] = self.options.position;
|
||||
self.options[point] = self.options.position;
|
||||
self.$player[0].options(point, self.options[point]);
|
||||
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() {
|
||||
|
|
@ -533,8 +538,8 @@ Ox.VideoEditor = function(options, self) {
|
|||
|
||||
function setSizes() {
|
||||
self.sizes = getSizes();
|
||||
self.$player.forEach(function(v, i) {
|
||||
v.options({
|
||||
self.$player.forEach(function($player, i) {
|
||||
$player.options({
|
||||
height: self.sizes.player[i].height,
|
||||
width: self.sizes.player[i].width
|
||||
})
|
||||
|
|
@ -543,8 +548,8 @@ Ox.VideoEditor = function(options, self) {
|
|||
top: self.sizes.player[i].top + 'px'
|
||||
});
|
||||
});
|
||||
self.$timeline.forEach(function(v, i) {
|
||||
v.options({
|
||||
self.$timeline.forEach(function($timeline, i) {
|
||||
$timeline.options({
|
||||
width: self.sizes.timeline[i].width
|
||||
})
|
||||
.css({
|
||||
|
|
@ -559,12 +564,12 @@ Ox.VideoEditor = function(options, self) {
|
|||
setSizes();
|
||||
}
|
||||
|
||||
function toggleMute() {
|
||||
self.$player[0].toggleMute();
|
||||
function toggleMuted() {
|
||||
self.$player[0].toggleMuted();
|
||||
}
|
||||
|
||||
function togglePlay() {
|
||||
self.$player[0].togglePlay();
|
||||
function togglePaused() {
|
||||
self.$player[0].togglePaused();
|
||||
}
|
||||
|
||||
function toggleSize(event, data) {
|
||||
|
|
@ -577,7 +582,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
|
||||
self.setOption = function(key, value) {
|
||||
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();
|
||||
} else if (key == 'position') {
|
||||
self.$player[0].position(value);
|
||||
|
|
|
|||
|
|
@ -250,37 +250,65 @@ Ox.VideoPlayer = function(options, self) {
|
|||
self.$videoContainer = $('<div>')
|
||||
.addClass('OxVideoContainer')
|
||||
.css({
|
||||
top: self.options.externalControls && self.options.controlsTop ? '16px' : 0,
|
||||
})
|
||||
.bind({
|
||||
click: function() {
|
||||
togglePaused();
|
||||
}
|
||||
top: self.options.externalControls && self.options.controlsTop.length ? '16px' : 0,
|
||||
})
|
||||
.appendTo(that.$element)
|
||||
|
||||
self.$video = $('<video>')
|
||||
.attr(Ox.extend({
|
||||
preload: self.options.preload,
|
||||
src: self.video
|
||||
}, !self.options.paused ? {
|
||||
autoplay: 'autoplay'
|
||||
} : {}/*, self.options.poster ? {
|
||||
poster: self.options.poster
|
||||
} : {}*/))
|
||||
.css({
|
||||
position: 'absolute'
|
||||
})
|
||||
.bind(Ox.extend({
|
||||
ended: ended,
|
||||
loadedmetadata: loadedmetadata,
|
||||
seeked: seeked,
|
||||
seeking: seeking
|
||||
}, self.options.progress ? {
|
||||
progress: progress
|
||||
} : {}))
|
||||
.appendTo(self.$videoContainer);
|
||||
self.video = self.$video[0];
|
||||
if (self.options.type == 'play') {
|
||||
|
||||
self.$videoContainer.bind({
|
||||
click: function(e) {
|
||||
if (!$(e.target).is('.OxLogo')) {
|
||||
togglePaused();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
self.$video = $('<video>')
|
||||
.attr(Ox.extend({
|
||||
preload: self.options.preload,
|
||||
src: self.video
|
||||
}, !self.options.paused ? {
|
||||
autoplay: 'autoplay'
|
||||
} : {}/*, self.options.poster ? {
|
||||
poster: self.options.poster
|
||||
} : {}*/))
|
||||
.css({
|
||||
position: 'absolute'
|
||||
})
|
||||
.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]);
|
||||
|
||||
} 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') {
|
||||
|
||||
self.$muteButton = Ox.Button({
|
||||
|
|
@ -527,14 +569,16 @@ Ox.VideoPlayer = function(options, self) {
|
|||
.html(formatPosition())
|
||||
.bind({
|
||||
click: function() {
|
||||
if (!self.options.paused) {
|
||||
self.playOnSubmit = true;
|
||||
togglePaused();
|
||||
} else if (self.playOnLoad) {
|
||||
// if clicked during resolution switch,
|
||||
// don't play on load
|
||||
self.playOnLoad = false;
|
||||
self.playOnSubmit = true;
|
||||
if (self.options.type == 'play') {
|
||||
if (!self.options.paused) {
|
||||
self.playOnSubmit = true;
|
||||
togglePaused();
|
||||
} else if (self.playOnLoad) {
|
||||
// if clicked during resolution switch,
|
||||
// don't play on load
|
||||
self.playOnLoad = false;
|
||||
self.playOnSubmit = true;
|
||||
}
|
||||
}
|
||||
self.$position.hide();
|
||||
self.$positionInput
|
||||
|
|
@ -650,6 +694,20 @@ Ox.VideoPlayer = function(options, self) {
|
|||
})
|
||||
.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') {
|
||||
|
||||
self.$sizeButton = Ox.Button({
|
||||
|
|
@ -1264,6 +1322,10 @@ Ox.VideoPlayer = function(options, self) {
|
|||
return Ox.UI.getImagePath('symbol' + symbol + '.svg').replace('/classic/', '/modern/');
|
||||
}
|
||||
|
||||
function goToPoint() {
|
||||
that.triggerEvent('gotopoint');
|
||||
}
|
||||
|
||||
function hideControlMenus() {
|
||||
['find', 'volume', 'resolution'].forEach(function(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() {
|
||||
|
||||
Ox.print('LOADEDMETADATA')
|
||||
|
|
@ -1472,32 +1547,41 @@ Ox.VideoPlayer = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function setPoint() {
|
||||
that.triggerEvent('setpoint');
|
||||
}
|
||||
|
||||
function setPosition(position, from) {
|
||||
position = Ox.limit(position, self['in'], self['out']);
|
||||
self.options.position = Math.round(
|
||||
position * 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.$subtitle && setSubtitle();
|
||||
self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({
|
||||
position: self.options.position
|
||||
});
|
||||
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() {
|
||||
|
|
@ -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) {
|
||||
var ms = callback ? 250 : 0;
|
||||
var animate = !!callback;
|
||||
self.width = self.options.fullscreen ? window.innerWidth : self.options.width;
|
||||
self.height = self.options.fullscreen ? window.innerHeight : self.options.height;
|
||||
self.videoCSS = getVideoCSS();
|
||||
|
|
@ -1525,42 +1622,38 @@ Ox.VideoPlayer = function(options, self) {
|
|||
self.timelineImageWidth = self.timelineWidth - self.barHeight;
|
||||
}
|
||||
}
|
||||
that.animate(getCSS('player'), ms, callback);
|
||||
self.$videoContainer.animate(getCSS('videoContainer'), ms);
|
||||
self.$video.animate(self.videoCSS, ms);
|
||||
self.$poster && self.$poster.animate(self.videoCSS, ms);
|
||||
self.$logo && self.$logo.animate(getCSS('logo'), ms);
|
||||
self.$loadingIcon.animate(getCSS('loadingIcon'), ms);
|
||||
self.$playIcon && self.$playIcon.animate(getCSS('playIcon'), ms);
|
||||
self.$subtitle && self.$subtitle.animate(getCSS('subtitle'), ms);
|
||||
self.$controlsTop && self.$controlsTop.animate(getCSS('controlsTop'), ms);
|
||||
self.$title && self.$title.animate(getCSS('title'), ms);
|
||||
self.$spaceTop && self.$spaceTop.animate(getCSS('spaceTop'), ms);
|
||||
self.$controlsBottom && self.$controlsBottom.animate(getCSS('controlsBottom'), ms);
|
||||
if (self.$timeline) {
|
||||
self.$timeline.animate(getCSS('timeline'), ms, function() {
|
||||
self.$timeline.options({
|
||||
width: self.timelineWidth
|
||||
})
|
||||
setSize(that, getCSS('player'), animate, callback);
|
||||
setSize(self.$videoContainer, getCSS('videoContainer'), animate);
|
||||
setSize(self.$video, self.videoCSS, animate);
|
||||
setSize(self.$poster, self.videoCSS, animate);
|
||||
setSize(self.$logo, getCSS('logo'), animate);
|
||||
setSize(self.$loadingIcon, getCSS('loadingIcon'), animate);
|
||||
setSize(self.$playIcon, getCSS('playIcon'), animate);
|
||||
setSize(self.$subtitle, getCSS('subtitle'), animate);
|
||||
setSize(self.$controlsTop, getCSS('controlsTop'), animate);
|
||||
setSize(self.$title, getCSS('title'), animate);
|
||||
setSize(self.$spaceTop, getCSS('spaceTop'), animate);
|
||||
setSize(self.$controlsBottom, getCSS('controlsBottom'), animate);
|
||||
setSize(self.$timeline, getCSS('timeline'), animate, function() {
|
||||
self.$timeline.options({
|
||||
width: self.timelineWidth
|
||||
});
|
||||
}
|
||||
self.$spaceBottom && self.$spaceBottom.animate(getCSS('spaceBottom'), ms);
|
||||
if (self.$find) {
|
||||
self.$find.animate(getCSS('find'), ms);
|
||||
});
|
||||
setSize(self.$spaceBottom, getCSS('spaceBottom'), animate);
|
||||
setSize(self.$find, getCSS('find'), animate, function() {
|
||||
self.$findInput.options({
|
||||
width: Math.min(128, self.width - 80)
|
||||
});
|
||||
}
|
||||
if (self.$volume) {
|
||||
self.$volume.animate(getCSS('volume'), ms);
|
||||
});
|
||||
setSize(self.$volume, getCSS('volume'), animate, function() {
|
||||
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) {
|
||||
self.posterMarkerCSS = getPosterMarkerCSS();
|
||||
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)
|
||||
self.options.find = value;
|
||||
self.results = find(self.options.find, hasPressedEnter);
|
||||
Ox.print('results', self.results.length)
|
||||
self.$results.html(self.results.length);
|
||||
self.$previousButton.options({
|
||||
disabled: self.results.length <= 1
|
||||
});
|
||||
self.$nextButton.options({
|
||||
disabled: self.results.length <= 1
|
||||
});
|
||||
self.$clearButton.options({
|
||||
disabled: !self.options.find
|
||||
});
|
||||
Ox.print('results', self.results.length);
|
||||
if (self.$find) {
|
||||
self.$results.html(self.results.length);
|
||||
self.$previousButton.options({
|
||||
disabled: self.results.length <= 1
|
||||
});
|
||||
self.$nextButton.options({
|
||||
disabled: self.results.length <= 1
|
||||
});
|
||||
self.$clearButton.options({
|
||||
disabled: !self.options.find
|
||||
});
|
||||
}
|
||||
self.subtitle && setSubtitleText();
|
||||
self.$timeline && self.$timeline.options({
|
||||
find: self.options.find,
|
||||
|
|
@ -1915,6 +2010,16 @@ Ox.VideoPlayer = function(options, self) {
|
|||
return that;
|
||||
};
|
||||
|
||||
that.togglePaused = function() {
|
||||
togglePaused();
|
||||
return that;
|
||||
}
|
||||
|
||||
that.toggleMuted = function() {
|
||||
toggleMuted();
|
||||
return that;
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue