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

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

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