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

support multipart video

Browse source
This commit is contained in:
rlx 2011-08-19 10:45:36 +00:00
parent 676cb72101
commit c5bde89971
2 changed files with 187 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

272
source/Ox.UI/js/Video/Ox.VideoElement.js
View file

@ -3,182 +3,196 @@
Ox.VideoElement = function(options, self) {
self = self || {};
var that = Ox.Element('<video>', self)
var that = Ox.Element({}, self)
.defaults({
fps: 25,
height: 0,
loop: false,
muted: false,
paused: false,
playInToOut: false,
points: [0, 0],
position: 0,
poster: '',
url: '',
width: 0
})
.options(options || {})
.attr({
//height: self.options.height,
poster: self.options.poster,
preload: 'auto',
src: self.options.url,
//width: self.options.width
})
.css({
height: self.options.height + 'px',
width: self.options.width + 'px'
autoplay: false,
preload: 'none',
src: []
})
.options(options || {});
self.options.src = Ox.isArray(self.options.src) ? self.options.src : [self.options.src];
Ox.print('VIDEO ELEMENT OPTIONS', self.options)
self.currentPart = 0;
self.duration = 0;
self.durations = self.options.src.map(function() {
return 0;
});
self.offsets = [];
self.parts = self.options.src.length;
self.paused = true;
self.$videos = self.options.src.map(function(src, i) {
return $('<video>')
.attr(Ox.extend({
preload: 'metadata',
src: src
}, i == 0 && self.options.autoplay ? {
autoplay: 'autoplay'
} : {}))
.css({position: 'absolute'})
.bind({
ended: ended,
canplay: function() {
Ox.print('canplay')
},
durationchange: function() {
Ox.print('durationchange')
ended: function() {
if (i < self.parts - 1) {
setCurrentPart(self.currentPart + 1);
self.video.play();
} else {
that.triggerEvent('ended');
}
},
loadedmetadata: function() {
Ox.print('loadedmetadata', self.video.duration)
self.video.currentTime = self.options.position;
that.triggerEvent('loadedmetadata', {
video: self.video
});
},
progress: function() {
that.triggerEvent('progress', {
video: self.video
self.durations[i] = self.videos[i].duration;
Ox.print(i, 'lm', self.durations);
if (Ox.every(self.durations)) {
self.duration = Ox.sum(self.durations);
self.offsets = Ox.range(self.parts).map(function(i) {
return Ox.sum(Ox.sub(self.durations, 0, i));
});
Ox.print('s.o', self.offsets)
that.triggerEvent('loadedmetadata');
}
},
seeked: function() {
that.triggerEvent('seeked');
},
seeking: function() {
that.triggerEvent('seeking');
},
progress: function() {
}
})
.hide()
.appendTo(that.$element);
});
self.videos = self.$videos.map(function($video) {
return $video[0];
});
self.$video = self.$videos[0].show();
self.video = self.$video[0];
$.extend(self, {
millisecondsPerFrame: 1000 / self.options.fps,
video: that.$element[0]
});
function ended() {
that.pause()
.triggerEvent('paused', {
position: self.options.position
});
function getCurrentTime() {
return self.offsets[self.currentPart] + self.video.currentTime;
}
function playing() {
var event = 'playing';
self.options.position = Math.round(self.video.currentTime * self.options.fps) / self.options.fps;
if (self.options.playInToOut && self.options.position >= self.options.points[1]) {
event = 'paused';
that.position(self.options.points[1]).pause();
function getset(key, value) {
var ret;
if (Ox.isUndefined(value)) {
ret = self.video[key]
} else {
self.video[key] = value;
ret = that;
}
that.triggerEvent(event, {
position: self.options.position
});
return ret;
}
self.setOption = function(key, value) {
if (key == 'height') {
that.size(self.options.width, value);
} else if (key == 'muted') {
that[value ? 'mute' : 'unmute']();
} else if (key == 'paused') {
that[value ? 'pause' : 'play']();
} else if (key == 'points') {
that.points(value);
} else if (key == 'width') {
that.size(value, self.options.height);
function setCurrentPart(part) {
Ox.print('sCP', part)
var css = {};
['left', 'top', 'width', 'height'].forEach(function(key) {
css[key] = self.$video.css(key);
});
self.$video.hide();
self.video.pause();
self.$video = self.$videos[part].css(css).show();
self.video = self.$video[0];
!self.paused && self.video.play();
self.currentPart = part;
Ox.print('sCP', part, self.video.src)
}
function setCurrentTime(time) {
var currentPart, currentTime;
Ox.loop(self.parts - 1, -1, -1, function(i) {
if (self.offsets[i] <= time) {
currentPart = i;
currentTime = time - self.offsets[i];
return false;
}
});
Ox.print('sCT', time, currentPart, currentTime);
if (currentPart != self.currentPart) {
setCurrentPart(currentPart);
}
self.video.currentTime = currentTime;
}
that.animate = function() {
self.$video.animate.apply(self.$video, arguments);
return that;
}
that.buffered = function() {
return self.video.buffered;
};
that.mute = function() {
self.options.muted = true;
self.video.muted = true;
that.currentTime = function() {
var ret;
if (arguments.length == 0) {
ret = getCurrentTime();
} else {
setCurrentTime(arguments[0]);
ret = that;
}
return ret;
};
that.css = function() {
self.$video.css.apply(self.$video, arguments);
return that;
};
that.duration = function() {
return self.duration;
};
that.muted = function() {
return self.options.muted;
}
return getset('muted', arguments[0]);
};
that.pause = function() {
self.options.paused = true;
self.options.playInToOut = false;
self.paused = true;
self.video.pause();
clearInterval(self.playInterval);
return that;
};
that.paused = function() {
return self.options.paused;
}
that.play = function() {
self.options.paused = false;
self.paused = false;
self.video.play();
self.playInterval = setInterval(playing, self.millisecondsPerFrame);
return that;
};
that.playInToOut = function() {
self.options.playInToOut = true;
that.position(self.options.points[0]);
self.options.paused && that.play();
return that;
};
that.points = function(points) {
self.options.points = points;
}
that.position = function(pos) {
// fixme: why not use options??
that.src = function() {
var ret;
if (arguments.length == 0) {
return self.video.currentTime;
ret = self.video.src;
} else {
self.options.position = pos;
self.video.currentTime = self.options.position;
return that;
self.options.src = Ox.isArray(arguments[0]) ? arguments[0] : [arguments[0]];
self.videos[currentPart].src = self.options.src[currentPart];
self.videos.forEach(function(video, i) {
if (i != currentPart) {
video.src = self.options.src[i];
}
})
ret = that;
}
return ret;
};
that.size = function(width, height) {
// fixme: why options? use css!
if (arguments.length == 0) {
return {
width: self.options.width,
height: self.options.height
};
} else {
self.options.width = width;
self.options.height = height;
that.css({
width: width + 'px',
height: height + 'px'
});
return that;
}
that.videoHeight = function() {
return self.video.videoHeight;
};
that.toggleMute = function() {
self.video.muted = !self.video.muted;
return that;
}
that.togglePlay = function() {
self.options.paused = !self.options.paused;
that[self.options.paused ? 'pause' : 'play']();
}
that.unmute = function() {
self.video.muted = false;
return that;
that.videoWidth = function() {
return self.video.videoWidth;
};
that.volume = function(value) {
return getset('volume', arguments[0]);
}
return that;
};

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

@ -24,6 +24,7 @@ Ox.VideoPlayer <f> Generic Video Player
externalControls <b|false> If true, controls are outside the video
find <s|''> Query string
focus <s|'click'> focus on 'click', 'load' or 'mouseover'
format <s|''> video format (like 'webm')
fps <n|25> Frames per second
fullscreen <b|false> If true, video is in fullscreen
height <n|144> Height in px (excluding external controls)
@ -82,6 +83,7 @@ Ox.VideoPlayer = function(options, self) {
externalControls: false,
find: '',
focus: 'click',
format: '',
fps: 25,
fullscreen: false,
height: 144,
@ -131,11 +133,14 @@ Ox.VideoPlayer = function(options, self) {
if (Ox.isString(self.options.video)) {
self.video = self.options.video;
} else {
/*
self.resolutions = Ox.sort(Object.keys(self.options.video));
if (!(self.options.resolution in self.options.video)) {
self.options.resolution = self.resolutions[0];
}
self.video = self.options.video[self.options.resolution];
*/
self.video = self.options.video(self.options.resolution, self.options.format)
}
if (self.options.playInToOut) {
@ -266,19 +271,17 @@ Ox.VideoPlayer = function(options, self) {
}
});
self.$video = $('<video>')
.attr(Ox.extend({
self.$video = Ox.VideoElement(
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({
} : {}*/)
)
.bindEvent(Ox.extend({
ended: ended,
loadedmetadata: loadedmetadata,
seeked: seeked,
@ -288,7 +291,7 @@ Ox.VideoPlayer = function(options, self) {
} : {}))
.appendTo(self.$videoContainer);
self.video = self.$video[0];
self.$video.$element.css({position: 'absolute'});
} else {
@ -1119,8 +1122,8 @@ Ox.VideoPlayer = function(options, self) {
if ($.browser.mozilla) {
//Ox.print(e, e.layerX - 56)
return Ox.limit(
(e.layerX - 48 - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
0, self.video.duration
(e.layerX - 48 - self.barHeight / 2) / self.timelineImageWidth * self.$video.duration(),
0, self.$video.duration()
);
} else {
/*Ox.print(e.offsetX, Ox.limit(
@ -1128,8 +1131,8 @@ Ox.VideoPlayer = function(options, self) {
0, self.video.duration
))*/
return Ox.limit(
(e.offsetX - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
0, self.video.duration
(e.offsetX - self.barHeight / 2) / self.timelineImageWidth * self.$video.duration(),
0, self.$video.duration()
);
}
}
@ -1177,8 +1180,8 @@ Ox.VideoPlayer = function(options, self) {
imageData = context.getImageData(0, 0, width, height),
data = imageData.data;
self.buffered.forEach(function(range) {
var left = Math.round(range[0] * width / self.video.duration),
right = Math.round(range[1] * width / self.video.duration);
var left = Math.round(range[0] * width / self.$video.duration()),
right = Math.round(range[1] * width / self.$video.duration());
Ox.loop(left, right, function(x) {
Ox.loop(height, function(y) {
index = x * 4 + y * 4 * width;
@ -1331,7 +1334,7 @@ Ox.VideoPlayer = function(options, self) {
}
function hideControls() {
Ox.print('hideControls');
//Ox.print('hideControls');
clearTimeout(self.interfaceTimeout);
self.interfaceTimeout = setTimeout(function() {
if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) {
@ -1403,8 +1406,8 @@ Ox.VideoPlayer = function(options, self) {
self.loadedMetadata = true;
self.videoWidth = self.video.videoWidth;
self.videoHeight = self.video.videoHeight;
self.videoWidth = self.$video.videoWidth();
self.videoHeight = self.$video.videoHeight();
self.videoCSS = getVideoCSS();
self.posterMarkerCSS = getPosterMarkerCSS();
self.$video.css(self.videoCSS);
@ -1414,10 +1417,10 @@ Ox.VideoPlayer = function(options, self) {
});
self.out = self.options.playInToOut &&
self.options.out < self.video.duration ?
self.options.out : self.video.duration;
self.options.out < self.$video.duration() ?
self.options.out : self.$video.duration();
self.options.duration = self.out - self['in'];
self.video.currentTime = self.options.position;
self.$video.currentTime(self.options.position);
self.options.paused && self.options.showMarkers && setMarkers();
self.options.paused && self.playOnLoad && togglePaused('button');
@ -1469,7 +1472,7 @@ Ox.VideoPlayer = function(options, self) {
}
function playing() {
self.options.position = self.video.currentTime;
self.options.position = self.$video.currentTime();
if (
(self.options.playInToOut || self.playInToOut) &&
self.options.position >= self.options.out
@ -1496,7 +1499,7 @@ Ox.VideoPlayer = function(options, self) {
}
function progress() {
var buffered = self.video.buffered;
var buffered = self.$video.buffered();
for (var i = 0; i < buffered.length; i++) {
self.buffered[i] = [buffered.start(i), buffered.end(i)];
// fixme: firefox weirdness
@ -1562,7 +1565,7 @@ Ox.VideoPlayer = function(options, self) {
self.$position && self.$position.html(formatPosition());
if (self.options.type == 'play') {
if (self.loadedMetadata && from != 'video') {
self.video.currentTime = self.options.position;
self.$video.currentTime(self.options.position);
}
if (self.iconIsVisible) {
self.$playIcon.animate({
@ -1592,7 +1595,7 @@ Ox.VideoPlayer = function(options, self) {
}
self.loadedMetadata = false;
showLoadingIcon();
self.video.src = self.options.video[self.options.resolution];
self.$video.src(self.options.video[self.options.resolution]);
self.$playButton && self.$playButton.options({
disabled: true
});
@ -1691,10 +1694,10 @@ Ox.VideoPlayer = function(options, self) {
self.options.volume = volume;
if (!!self.options.volume == self.options.muted) {
self.options.muted = !self.options.muted;
self.video.muted = self.options.muted;
self.$video.muted(self.options.muted);
self.$muteButton.toggleTitle();
}
self.video.volume = self.options.volume;
self.$video.volume(self.options.volume);
self.$volumeButton.attr({
src: getVolumeImageURL()
});
@ -1705,7 +1708,7 @@ Ox.VideoPlayer = function(options, self) {
}
function showControls() {
Ox.print('showControls');
//Ox.print('showControls');
clearTimeout(self.interfaceTimeout);
if (!self.interfaceIsVisible) {
self.interfaceIsVisible = true;
@ -1818,7 +1821,7 @@ Ox.VideoPlayer = function(options, self) {
setPosition(parsePositionInput(self.$positionInput.options('value')));
if (self.playOnSubmit) {
togglePaused();
self.video.play();
self.$video.play();
self.playOnSubmit = false;
}
if (self.focus == 'mouseenter' && !self.mouseHasLeft) {
@ -1842,7 +1845,7 @@ Ox.VideoPlayer = function(options, self) {
self.options.fullscreen = !self.options.fullscreen;
if (!self.options.paused) {
// video won't keep playing accross detach/append
self.video.pause();
self.$video.pause();
playOnFullscreen = true;
}
if (self.options.fullscreen) {
@ -1861,7 +1864,7 @@ Ox.VideoPlayer = function(options, self) {
})
.appendTo(Ox.UI.$body);
setSizes(function() {
playOnFullscreen && self.video.play();
playOnFullscreen && self.$video.play();
that.bind({
mousemove: function() {
showControls();
@ -1898,7 +1901,7 @@ Ox.VideoPlayer = function(options, self) {
zIndex: 1
})
.appendTo(self.$parent);
playOnFullscreen && self.video.play();
playOnFullscreen && self.$video.play();
self.options.enableKeyboard && that.gainFocus();
//showControls();
});
@ -1911,10 +1914,10 @@ Ox.VideoPlayer = function(options, self) {
function toggleMuted(from) {
showVolume();
self.options.muted = !self.options.muted;
self.video.muted = self.options.muted;
self.$video.muted(self.options.muted);
if (!self.options.muted && !self.options.volume) {
self.options.volume = 1;
self.video.volume = 1;
self.$video.volume(1);
}
if (self.$muteButton && from != 'button') {
self.$muteButton.toggleTitle();
@ -1939,7 +1942,7 @@ Ox.VideoPlayer = function(options, self) {
paused: self.options.paused
});
if (self.options.paused) {
self.video.pause();
self.$video.pause();
clearInterval(self.playInterval);
if (self.options.showIcon) {
togglePlayIcon();
@ -1951,7 +1954,7 @@ Ox.VideoPlayer = function(options, self) {
if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) {
setPosition(self.options['in']);
}
self.video.play();
self.$video.play();
self.playInterval = setInterval(playing, self.millisecondsPerFrame);
if (self.options.showIcon) {
self.options.showIcon && self.$playIcon.animate({