From b19efd9d12733fc9b289e6f0c1a8d3969a30cdb3 Mon Sep 17 00:00:00 2001 From: j <0x006A@0x2620.org> Date: Sat, 8 Feb 2014 18:43:46 +0000 Subject: [PATCH] better video clip handling in VideoElement --- source/Ox.UI/js/Video/VideoElement.js | 91 ++++++++++++++------------- 1 file changed, 49 insertions(+), 42 deletions(-) diff --git a/source/Ox.UI/js/Video/VideoElement.js b/source/Ox.UI/js/Video/VideoElement.js index e08588b2..db333440 100644 --- a/source/Ox.UI/js/Video/VideoElement.js +++ b/source/Ox.UI/js/Video/VideoElement.js @@ -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,15 +54,21 @@ Ox.VideoElement = function(options, self) { if (update) { self.currentItem = 0; 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('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,8 +135,10 @@ Ox.VideoElement = function(options, self) { }, seeked: function() { if (self.video == this) { - that.triggerEvent('seeked'); - self.seeking = false; + if (self.loadedMetadata && self.seeking && !self.loading) { + that.triggerEvent('seeked'); + self.seeking = false; + } } }, seeking: function() { @@ -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() { - that.triggerEvent('sizechange'); - that.triggerEvent('itemchange', { - item: self.currentItem - }); + self.currentItem = item; + self.currentItemId = self.items[self.currentItem].id; + 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.seeking = false; - self.$video.show(); - }) - } else { - onLoadedMetadata(self.$video, function() { + self.loading = false; + !self.paused && self.video.play(); self.$video.show(); + if (self.seeking) { + that.triggerEvent('seeked'); + self.seeking = false; + } + callback && callback(); + loadNextVideo(); }); - } - 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');