diff --git a/demos/video/js/video.js b/demos/video/js/video.js index 7065a38c..854f67a0 100644 --- a/demos/video/js/video.js +++ b/demos/video/js/video.js @@ -40,11 +40,14 @@ Ox.load('UI', { enableVolume: true, focus: 'mouseenter', height: 192, + 'in': 3128.72, logoLink: 'http://next.0xdb.org/' + id, logoTitle: 'Watch on 0xdb', logo: 'png/logo.png', + out: 3130.72, paused: true, poster: poster, + posterFrame: 3168.04, //showIconOnLoad: true, showProgress: false, subtitles: 'srt/' + id + '.srt', diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index d33bc4c9..e4bfdf09 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -96,6 +96,7 @@ Ox.VideoPlayer = function(options, self) { playInToOut: false, position: 0, poster: '', + posterFrame: -1, preload: 'auto', out: 0, resolution: 0, @@ -355,6 +356,70 @@ Ox.VideoPlayer = function(options, self) { } } + self.$posterMarker = $('
') + .css({ + position: 'absolute', + left: 0, + top: 0, + right: 0, + bottom: 0, + }) + .hide() + .appendTo(self.$videoContainer); + + self.$posterMarkerLeft = $('
') + .css({ + float: 'left', + background: 'rgba(0, 0, 0, 0.5)' + }) + .css({ + width: Math.floor((self.options.width - self.options.height) / 2) + 'px', + height: self.options.height + 'px' + }) + .appendTo(self.$posterMarker); + + self.$posterMarkerCenter = $('
') + .css({ + border: '1px solid rgba(255, 255, 255, 0.1)' + }) + .css({ + float: 'left', + width: (self.options.height - 2) + 'px', + height: (self.options.height - 2) + 'px' + }) + .appendTo(self.$posterMarker); + + self.$posterMarkerRight = $('
') + .css({ + background: 'rgba(0, 0, 0, 0.5)' + }) + .css({ + float: 'left', + width: Math.ceil((self.options.width - self.options.height) / 2) + 'px', + height: self.options.height + 'px' + }) + .appendTo(self.$posterMarker); + + self.$pointMarker = {}; + ['in', 'out'].forEach(function(point) { + self.$pointMarker[point] = {}; + ['top', 'bottom'].forEach(function(edge) { + var titleCase = Ox.toTitleCase(point) + Ox.toTitleCase(edge); + self.$pointMarker[point][edge] = $('') + .addClass('OxMarkerPoint OxMarker' + titleCase) + .attr({ + src: Ox.UI.PATH + 'png/videoMarker' + titleCase + '.png' + }) + .hide() + .appendTo(self.$videoContainer); + /* + if (self.options.points[i] == self.options.position) { + self.$pointMarker[point][edge].show(); + } + */ + }); + }); + if (self.options.subtitles.length || true) { // fixme self.$subtitle = $('
') //.addClass('OxSubtitle') @@ -1547,6 +1612,26 @@ Ox.VideoPlayer = function(options, self) { } } + function setMarkers() { + self.options.position == self.options.posterFrame ? + self.$posterMarker.show() : self.$posterMarker.hide(); + Ox.forEach(self.$pointMarker, function(markers, point) { + Ox.forEach(markers, function(marker) { + self.options.position == self.options[point] ? + marker.show() : marker.hide(); + }); + }); + } + + function hideMarkers() { + self.$posterMarker.hide(); + Ox.forEach(self.$pointMarker, function(markers) { + Ox.forEach(markers, function(marker) { + marker.hide(); + }); + }); + } + function setPosition(position, from) { position = Ox.limit(position, self['in'], self['out']); self.options.position = Math.round( @@ -1567,6 +1652,7 @@ Ox.VideoPlayer = function(options, self) { }, 250); self.posterIsVisible = false; } + self.options.paused && setMarkers(); self.$subtitle && setSubtitle(); self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({ position: self.options.position @@ -1913,6 +1999,7 @@ Ox.VideoPlayer = function(options, self) { opacity: 0 }, 250, togglePlayIcon); } + hideMarkers(); } if (self.$playButton && from != 'button') { self.$playButton.toggleTitle(); diff --git a/source/Ox.UI/themes/classic/_index.html b/source/Ox.UI/themes/classic/_index.html index 5060b397..409b965e 100644 --- a/source/Ox.UI/themes/classic/_index.html +++ b/source/Ox.UI/themes/classic/_index.html @@ -56,12 +56,13 @@ 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowDown', 'left', 'right', 'up', 'down', 'pause', 'playInToOut', 'goToIn', 'goToOut', 'setIn', 'setOut', + 'goToPoster', 'setPoster', 'center', 'zoom', 'grow', 'shrink', 'fill', 'fit', 'unmute', 'volumeUp', 'volumeDown', 'mute', 'undo', 'redo', 'unlock', 'lock', 'mount', 'unmount', 'sync', 'info', 'warning', 'help', - 'check', 'bracket', + 'check', 'embed', 'bracket', 'delete', 'download', 'edit', 'find', 'flag', 'like', 'publish', 'set', 'star', 'user', 'view', 'loading' ].forEach(function(symbol) { diff --git a/source/Ox.UI/themes/classic/svg/symbolAdd.svg b/source/Ox.UI/themes/classic/svg/symbolAdd.svg index 2f6d2222..69c2611a 100644 --- a/source/Ox.UI/themes/classic/svg/symbolAdd.svg +++ b/source/Ox.UI/themes/classic/svg/symbolAdd.svg @@ -1,6 +1,6 @@ - - + + \ No newline at end of file diff --git a/source/Ox.UI/themes/classic/svg/symbolEmbed.svg b/source/Ox.UI/themes/classic/svg/symbolEmbed.svg new file mode 100644 index 00000000..47906b13 --- /dev/null +++ b/source/Ox.UI/themes/classic/svg/symbolEmbed.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/source/Ox.UI/themes/classic/svg/symbolGoToPoster.svg b/source/Ox.UI/themes/classic/svg/symbolGoToPoster.svg new file mode 100644 index 00000000..c4367542 --- /dev/null +++ b/source/Ox.UI/themes/classic/svg/symbolGoToPoster.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/source/Ox.UI/themes/classic/svg/symbolRemove.svg b/source/Ox.UI/themes/classic/svg/symbolRemove.svg index 80eac286..9711ac5d 100644 --- a/source/Ox.UI/themes/classic/svg/symbolRemove.svg +++ b/source/Ox.UI/themes/classic/svg/symbolRemove.svg @@ -1,5 +1,5 @@ - - + + \ No newline at end of file diff --git a/source/Ox.UI/themes/classic/svg/symbolSetPoster.svg b/source/Ox.UI/themes/classic/svg/symbolSetPoster.svg new file mode 100644 index 00000000..2892c8c9 --- /dev/null +++ b/source/Ox.UI/themes/classic/svg/symbolSetPoster.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file