forked from 0x2620/oxjs
support multipart video
This commit is contained in:
rlx
parent
676cb72101
commit
c5bde89971
2 changed files with 187 additions and 170 deletions
|
|
@ -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({
|
||||
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({
|
||||
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
|
||||
} : {}*/)
|
||||
)
|
||||
.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({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue