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

better video clip handling in VideoElement

Browse source
This commit is contained in:
j 2014-02-08 18:43:46 +00:00
parent e1ee8fdd2e
commit b19efd9d12
1 changed files with 49 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -30,6 +30,7 @@ Ox.VideoElement = function(options, self) {
items: function() {
self.loadedMetadata = false;
loadItems(function() {
self.loadedMetadata = true;
var update = true;
if (self.currentItem >= self.numberOfItems) {
self.currentItem = 0;
@ -53,16 +54,22 @@ Ox.VideoElement = function(options, self) {
if (update) {
self.currentItem = 0;
self.currentItemId = self.items[self.currentItem].id;
setCurrentVideo();
}
}
onLoadedMetadata(self.$video, function() {
setCurrentVideo(function() {
that.triggerEvent('seeked');
that.triggerEvent('durationchange', {
duration: that.duration()
});
});
}
}
if (!update) {
that.triggerEvent('seeked');
that.triggerEvent('durationchange', {
duration: that.duration()
});
}
}
});
}
})
@ -76,6 +83,7 @@ Ox.VideoElement = function(options, self) {
self.loadedMetadata = false;
self.paused = true;
self.seeking = false;
self.loading = true;
self.$videos = [getVideo(), getVideo()];
self.$video = self.$videos[self.currentVideo];
self.video = self.$video[0];
@ -90,14 +98,11 @@ Ox.VideoElement = function(options, self) {
loadItems(function() {
setCurrentItem(0);
self.options.autoplay && play();
onLoadedMetadata(self.$video, function() {
that.triggerEvent('loadedmetadata');
});
});
function getCurrentTime() {
var item = self.items[self.currentItem];
return self.seeking
return self.seeking || self.loading
? self.currentTime
: item ? item.position + self.video.currentTime - item['in'] : 0;
}
@ -130,9 +135,11 @@ Ox.VideoElement = function(options, self) {
},
seeked: function() {
if (self.video == this) {
if (self.loadedMetadata && self.seeking && !self.loading) {
that.triggerEvent('seeked');
self.seeking = false;
}
}
},
seeking: function() {
//seeking event triggered in setCurrentTime
@ -201,7 +208,6 @@ Ox.VideoElement = function(options, self) {
});
}
} else {
self.loadedMetadata = true;
self.items = items;
self.numberOfItems = self.items.length;
callback && callback();
@ -226,10 +232,10 @@ Ox.VideoElement = function(options, self) {
function onLoadedMetadata($video, callback) {
if ($video[0].readyState) {
callback();
callback($video[0]);
} else {
$video.one('loadedmetadata', function(event) {
callback();
callback($video[0]);
});
}
}
@ -250,22 +256,22 @@ Ox.VideoElement = function(options, self) {
}
}
self.video && self.video.pause();
//fixme always sync now?
set();
function set() {
self.currentItem = item;
self.currentItemId = self.items[self.currentItem].id;
setCurrentVideo();
onLoadedMetadata(self.$video, function() {
Ox.Log('Video', 'sCV', self.video.src, item['in']);
setCurrentVideo(function() {
if (!self.loadedMetadata) {
self.loadedMetadata = true;
that.triggerEvent('loadedmetadata');
}
that.triggerEvent('sizechange');
that.triggerEvent('itemchange', {
item: self.currentItem
});
});
}
}
function setCurrentVideo() {
function setCurrentVideo(callback) {
var css = {},
muted = false,
volume = 1,
@ -275,6 +281,8 @@ Ox.VideoElement = function(options, self) {
['left', 'top', 'width', 'height'].forEach(function(key) {
css[key] = self.$videos[self.currentVideo].css(key);
});
self.currentTime = item.position;
self.loading = true;
if (self.video) {
self.$videos[self.currentVideo].hide();
self.video.pause();
@ -285,35 +293,34 @@ Ox.VideoElement = function(options, self) {
self.$video = self.$videos[self.currentVideo];
self.video = self.$video[0];
if (self.$video.attr('src') != item.src) {
self.loadedMetadata && Ox.Log('Video', 'caching next item failed, reset src');
self.video.src = item.src;
}
self.video.volume = volume;
self.video.muted = muted;
self.$video.css(css);
!self.paused && self.video.play();
Ox.Log('Video', 'sCV', self.video.src, item['in']);
if (item['in']) {
setCurrentItemTime(item['in']);
}
if (self.video.seeking || item['in'] != self.video.currentTime) {
self.seeking = true;
onLoadedMetadata(self.$video, function(video) {
self.$video.one('seeked', function() {
self.loading = false;
!self.paused && self.video.play();
self.$video.show();
if (self.seeking) {
that.triggerEvent('seeked');
self.seeking = false;
self.$video.show();
})
} else {
onLoadedMetadata(self.$video, function() {
self.$video.show();
});
}
callback && callback();
loadNextVideo();
});
video.currentTime = item['in'] || 0;
});
}
function setCurrentItemTime(currentTime) {
Ox.Log('Video', 'sCIT', currentTime, self.video.currentTime, 'delta', currentTime - self.video.currentTime);
Ox.Log('Video', 'sCIT', currentTime, self.video.currentTime,
'delta', currentTime - self.video.currentTime);
if (currentTime != self.video.currentTime) {
onLoadedMetadata(self.$video, function() {
self.video.currentTime = currentTime;
onLoadedMetadata(self.$video, function(video) {
video.currentTime = currentTime;
});
} else {
that.triggerEvent('seeked');