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
|
|
@ -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() {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$.extend(self, {
|
||||
millisecondsPerFrame: 1000 / self.options.fps,
|
||||
video: that.$element[0]
|
||||
})
|
||||
.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];
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
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 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.videoWidth = function() {
|
||||
return self.video.videoWidth;
|
||||
};
|
||||
|
||||
that.volume = function(value) {
|
||||
return getset('volume', arguments[0]);
|
||||
}
|
||||
|
||||
that.togglePlay = function() {
|
||||
self.options.paused = !self.options.paused;
|
||||
that[self.options.paused ? 'pause' : 'play']();
|
||||
}
|
||||
|
||||
that.unmute = function() {
|
||||
self.video.muted = false;
|
||||
return that;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue