support multiple resolutions per video player

demos/video/js/video.js

@@ -32,7 +32,7 @@ Ox.load('UI', {
         videoSize = getVideoSize(),
         $videos = [
             Ox.VideoPlayer({
-                    controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'],
+                    controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'resolution'],
                     controlsTop: ['fullscreen', 'title', 'find'],
                     enableFind: true,
                     enableFullscreen: true,
@@ -45,12 +45,16 @@ Ox.load('UI', {
                     logo: 'png/logo.png',
                     paused: true,
                     poster: poster,
-                    showIconOnLoad: true,
+                    //showIconOnLoad: true,
                     showProgress: false,
                     subtitles: 'srt/' + id + '.srt',
                     timeline: 'png/timeline.16.png',
                     title: 'Brick - Rian Johnson - 2005',
-                    video: url + '?' +  + Ox.random(1000000),
+                    video: {
+                        96: url + '?' +  + Ox.random(1000000),
+                        360: url + '?' +  + Ox.random(1000000),
+                        1080: url + '?' +  + Ox.random(1000000)
+                    },
                     width: 360
                 })
                 .css({

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -13,8 +13,8 @@ Ox.VideoPlayer <f> Generic Video Player
         controls <[[s]]|[[][]]> Controls, first top, then bottom, from left to right
             Can be 'fullscreen', 'scale', 'title', 'find', 'menu',
             'play', 'playInToOut', 'mute', 'volume', 'size', 'timeline', 'space',
-            'position', 'settings'. The 'space' control is just empty space
+            'position', 'resolution', 'settings'. The 'space' control is just
-            that separates left-aligned from right-aligned controls.
+            empty space that separates left-aligned from right-aligned controls.
         duration <n|-1> Duration (sec)
         enableFind <b|false> If true, enable find
         enableFullscreen <b|false> If true, enable fullscreen
@@ -40,6 +40,7 @@ Ox.VideoPlayer <f> Generic Video Player
         posterFrame <n|-1> Position of poster frame (sec)
         preload <s|'auto'> 'auto', 'metadata' or 'none'
         out <n|-1> Out point (sec)
+        resolution <n|0> resolution
         scaleToFill <b|false> If true, scale to fill (otherwise, scale to fit)
         showFind <b|false> If true, show find input
         showHours <b|false> If true, don't show hours for videos shorter than one hour
@@ -58,7 +59,8 @@ Ox.VideoPlayer <f> Generic Video Player
         timeline <s> Timeline image URL
         title <s|''> Video title
         type <s|'play'> 'play', 'in' or 'out'
-        video <s|''> Video URL
+        video <s|o|''> Video URL
+            String or object ({resolution: url, resolution: url, ...})
         volume <n|1> Volume (0-1)
         width <n|256> Width in px
 @*/
@@ -96,6 +98,7 @@ Ox.VideoPlayer = function(options, self) {
             poster: '',
             preload: 'auto',
             out: 0,
+            resolution: 0,
             scaleToFill: false,
             showFind: false,
             showHours: false,
@@ -126,6 +129,17 @@ Ox.VideoPlayer = function(options, self) {
         }
     });
 
+    if (Ox.isString(self.options.video)) {
+        self.video = self.options.video;
+    } else {
+        self.resolutions = Ox.sort(Object.keys(self.options.video));
+        if (!(self.options.resolution in self.options.video)) {
+            self.options.resolution = self.resolutions[0];
+        }
+        Ox.print('resolutions', self.resolutions)
+        self.video = self.options.video[self.options.resolution];
+    }
+
     self['in'] = self.options.playInToOut ? self.options['in'] : 0,
     self.out = self.options.playInToOut ? self.options.out : self.options.duration;
     self.options.duration = self.out - self['in'];
@@ -268,7 +282,7 @@ Ox.VideoPlayer = function(options, self) {
     self.$video = $('<video>')
         .attr(Ox.extend({
             preload: self.options.preload,
-            src: self.options.video
+            src: self.video
         }, !self.options.paused ? {
             autoplay: 'autoplay'
         } : {}/*, self.options.poster ? {
@@ -608,7 +622,6 @@ Ox.VideoPlayer = function(options, self) {
                         + self.options.showMilliseconds * 6;
 
                     self.$position = $('<div>')
-                        .addClass('foo')
                         .css({
                             float: 'left',
                             width: (self.positionWidth - 4) + 'px',
@@ -673,7 +686,117 @@ Ox.VideoPlayer = function(options, self) {
                         .css({
                             background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
                         });                
-                
+
+                } else if (control == 'resolution') {
+
+                    self.$resolutionButton = $('<div>')
+                        .css({
+                            float: 'left',
+                            width: '28px',
+                            height: '12px',
+                            padding: '2px',
+                            fontSize: '9px',
+                            textAlign: 'center',
+                            color: 'rgb(255, 255, 255)',
+                            cursor: 'default'
+                        })
+                        .html(self.options.resolution + 'p')
+                        .bind({
+                            click: function() {
+                                self.$resolution.toggle();
+                            }
+                        })
+                        .appendTo(self['$controls' + titlecase].$element);
+
+                    self.$resolution = $('<div>')
+                        .css({
+                            position: 'absolute',
+                            right: 0,
+                            bottom: '16px',
+                            width: '48px',
+                            height: (self.resolutions.length * 16) + 'px',
+                            background: 'transparent'
+                        })
+                        .bind({
+                            click: function(e) {
+                                var resolution = $(e.target).parent().data('resolution');
+                                self.$resolution.hide();
+                                if (resolution != self.options.resolution) {
+                                    self.$resolution.children().each(function() {
+                                        var $this = $(this);
+                                        $this.children()[1].src =
+                                            $this.data('resolution') == resolution ?
+                                            Ox.UI.getImagePath('symbolCheck.svg') :
+                                            Ox.UI.PATH + 'png/transparent.png'
+                                    });
+                                    self.$resolutionButton.html(resolution + 'p');
+                                    self.options.resolution = resolution
+                                    setResolution();
+                                }
+                            }
+                        })
+                        .hide()
+                        .appendTo(that.$element);
+                    self.resolutions.forEach(function(resolution, i) {
+                        var $item = $('<div>')
+                            .css({
+                                height: '16px',
+                                background: 'rgba(32, 32, 32, 0.5)'
+                            })
+                            .data({
+                                resolution: resolution
+                            })
+                            .bind({
+                                mouseenter: function() {
+                                    $(this)
+                                        .css({
+                                            backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
+                                        })
+                                        .css({
+                                            backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
+                                        })
+                                },
+                                mouseleave: function() {
+                                    $(this).css({
+                                        background: 'rgba(64, 64, 64, 0.25)'
+                                    });
+                                }
+                            })
+                            .appendTo(self.$resolution);
+                        if (i == 0) {
+                            $item.css({
+                                borderTopLeftRadius: '8px',
+                                borderTopRightRadius: '8px'
+                            })
+                        }
+                        $('<div>')
+                            .css({
+                                float: 'left',
+                                width: '32px',
+                                height: '14px',
+                                paddingTop: '2px',
+                                fontSize: '9px',
+                                textAlign: 'right',
+                                cursor: 'default'
+                            })
+                            .html(resolution + 'p')
+                            .appendTo($item);
+                        $('<img>')
+                            .attr({
+                                src: resolution == self.options.resolution ?
+                                    Ox.UI.getImagePath('symbolCheck.svg') :
+                                    Ox.UI.PATH + 'png/transparent.png'
+                            })
+                            .css({
+                                float: 'left',
+                                width: '9px',
+                                height: '9px',
+                                padding: '3px 3px 4px 4px'
+                            })
+                            .appendTo($item);
+                        
+                    })
+
                 } else if (control == 'scale') {
 
                     self.$scaleButton = Ox.Button({
@@ -1202,7 +1325,8 @@ Ox.VideoPlayer = function(options, self) {
             self.options.controlsBottom.reduce(function(prev, curr) {
                 return prev + (
                     curr == 'timeline' || curr == 'space' ? 0 :
-                    curr == 'position' ? self.positionWidth : 16
+                    curr == 'position' ? self.positionWidth :
+                    curr == 'resolution' ? 32 : 16
                 );
             }, 0);
     }
@@ -1248,6 +1372,9 @@ Ox.VideoPlayer = function(options, self) {
                 self.$volume && self.$volume.is(':visible') && self.$volume.animate({
                     opacity: 0
                 }, 250);
+                self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
+                    opacity: 0
+                }, 250);
                 self.$logo && self.$logo.animate({
                     top: getCSS('logo').top,
                     opacity: 0.25
@@ -1272,6 +1399,8 @@ Ox.VideoPlayer = function(options, self) {
 
     function loadedmetadata() {
 
+        Ox.print('LOADEDMETADATA')
+
         var hadDuration = !!self.options.duration;
 
         self.loaded = true;
@@ -1402,6 +1531,12 @@ Ox.VideoPlayer = function(options, self) {
         self.$position && self.$position.html(formatPosition());
     }
 
+    function setResolution() {
+        self.loaded = false;
+        showLoadingIcon();
+        self.video.src = self.options.video[self.options.resolution];
+    }
+
     function setSizes(callback) {
         var ms = callback ? 250 : 0;
         self.width = self.options.fullscreen ? window.innerWidth : self.options.width;
@@ -1410,13 +1545,7 @@ Ox.VideoPlayer = function(options, self) {
         self.iconLeft = parseInt((self.width - self.iconSize) / 2),
         self.iconTop = parseInt((self.height - self.iconSize) / 2);
         if (self.$timeline || self.$spaceBottom) {
-            self.timelineWidth = self.width - 
+            self.timelineWidth = getTimelineWidth();
-                self.options.controlsBottom.reduce(function(prev, curr) {
-                    return prev + (
-                        curr == 'timeline' || curr == 'space' ? 0 :
-                        curr == 'position' ? self.positionWidth : 16
-                    );
-                }, 0);
             if (self.$timeline) {
                 self.timelineImageWidth = self.timelineWidth - self.barHeight;
             }
@@ -1512,6 +1641,9 @@ Ox.VideoPlayer = function(options, self) {
         self.$volume && self.$volume.is(':visible') && self.$volume.animate({
             opacity: 1
         }, 250);
+        self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
+            opacity: 1
+        }, 250);
         self.$logo && self.$logo.animate({
             top: getCSS('logo').top,
             opacity: 0.5