sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

add video editor demo

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

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

@ -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;
};