diff --git a/source/Ox.UI/js/Video/Ox.VideoElement.js b/source/Ox.UI/js/Video/Ox.VideoElement.js index 20a68ace..c1df1e6e 100644 --- a/source/Ox.UI/js/Video/Ox.VideoElement.js +++ b/source/Ox.UI/js/Video/Ox.VideoElement.js @@ -47,6 +47,12 @@ Ox.VideoElement = function(options, self) { that.triggerEvent('progress', { video: self.video }); + }, + seeked: function() { + that.triggerEvent('seeked'); + }, + seeking: function() { + that.triggerEvent('seeking'); } }); diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 6812356f..e3e68a6f 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -65,10 +65,25 @@ Ox.VideoPlayer = function(options, self) { src: getBufferedImageURL() }) //self.$bar.html(Ox.formatDuration(data.video.buffered.end(data.video.buffered.length - 1))) - } + }, + seeked: hideLoadingIcon, + seeking: showLoadingIcon }) .appendTo(that); + self.$loadingIcon = $('') + .attr({ + src: Ox.UI.getImagePath('symbolLoadingAnimated.svg') + }) + .css({ + position: 'absolute', + left: self.options.width / 2 - 16 + 'px', + top: self.options.height / 2 - 16 + 'px', + width: '32px', + height: '32px' + }) + .appendTo(that.$element); + self.$controls = Ox.Bar({ size: self.barHeight }) @@ -243,6 +258,7 @@ Ox.VideoPlayer = function(options, self) { Ox.print('!!!!', data.video.width, data.video.height, data.video.videoWidth, data.video.videoHeight) self.duration = data.video.duration; Ox.print('DURATION', Ox.formatDuration(self.duration)); + hideLoadingIcon(); that.gainFocus().bindEvent({ key_space: function() { self.$playButton.toggleTitle(); @@ -294,6 +310,12 @@ Ox.VideoPlayer = function(options, self) { }, 1000); } + function hideLoadingIcon() { + self.$loadingIcon.animate({ + opacity: 0 + }, 0); + } + function showControls() { clearTimeout(self.controlsTimeout); self.$controls.animate({ @@ -301,6 +323,11 @@ Ox.VideoPlayer = function(options, self) { }, 250); } + function showLoadingIcon() { + self.$loadingIcon.animate({ + opacity: 1 + }, 0); + } function toggleMute() { self.$video.toggleMute(); }