change video resolution, trigger ended event in player

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -35,6 +35,7 @@ Ox.VideoEditor = function(options, self) {
                 position: 0,
                 posterFrame: 0,
                 posterFrameControls: false,
+                resolution: 0,
                 showAnnotations: false,
                 showLargeTimeline: true,
                 subtitles: [],
@@ -190,6 +191,7 @@ Ox.VideoEditor = function(options, self) {
                 paused: true,
                 position: type == 'play' ? self.options.position : self.options[type],
                 posterFrame: self.options.posterFrame,
+                resolution: self.options.resolution,
                 showMarkers: true,
                 showMilliseconds: 3,
                 sizeIsLarge: self.options.videoSize == 'large',
@@ -215,6 +217,9 @@ Ox.VideoEditor = function(options, self) {
                     changePlayer(data);
                     that.triggerEvent('position', data);
                 },
+                resolution: function(data) {
+                    that.triggerEvent('resolution', data);
+                },
                 size: toggleSize,
                 volume: function(data) {
                     that.triggerEvent('volume', data);
@@ -326,9 +331,10 @@ Ox.VideoEditor = function(options, self) {
 
     self.resolutions = [];
     Ox.forEach(self.options.video, function(url, resolution) {
-        Ox.Log('Video', url, resolution)
+        Ox.Log('Video', url, resolution);
         self.resolutions.push(
-            {id: resolution + '', title: resolution + 'p'}
+            {id: resolution + '', title: resolution + 'p',
+             checked: self.options.resolution == resolution}
         );
     });
 
@@ -425,6 +431,9 @@ Ox.VideoEditor = function(options, self) {
                         title: 'Keyboard Shortcuts',
                         width: 256
                     }).open();
+                } else if (Ox.getObjectById(self.resolutions, id)) {
+                    //FIXME: uncheck previous resolution
+                    self.$player[0].options({resolution: id});
                 }
             }
         })
@@ -445,13 +454,12 @@ Ox.VideoEditor = function(options, self) {
 
 
     self.$resolutionSelect = Ox.Select({
-            items: [{id: '96', title: '96p'},{id: '240', title: '240p'}],//self.resolutions,
-            width: 48
+            items: self.resolutions,
+            width: 48,
         })
         .css({float: 'left'})
         .bindEvent({
-            change: function() {
-
+            change: function(data) {
             }
         });
         //.appendTo(self.$videobar);

source/Ox.UI/js/Video/Ox.VideoElement.js

@@ -418,12 +418,12 @@ Ox.VideoElement = function(options, self) {
             ret = self.video.src;
         } else {
             self.options.src = Ox.isArray(arguments[0]) ? arguments[0] : [arguments[0]];
-            self.videos[currentPart].src = self.options.src[currentPart];
-            self.videos.forEach(function(video, i) {
-                if (i != currentPart) {
+            self.$video[self.currentPart].src = self.options.src[self.currentPart];
+            self.$video.each(function(video, i) {
+                if (i != self.currentPart) {
                     video.src = self.options.src[i];
                 }
-            })
+            });
             ret = that;
         }
         return ret;

source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js

@@ -30,6 +30,7 @@ Ox.VideoPanelPlayer = function(options, self) {
                 playInToOut: false,
                 position: 0,
                 poster: '',
+                resolution: 0,
                 scaleToFill: false,
                 showAnnotations: true,
                 showTimeline: true,
@@ -77,6 +78,7 @@ Ox.VideoPanelPlayer = function(options, self) {
             out: self.options.out,
             paused: true,
             position: self.options.position,
+            resolution: self.options.resolution,
             scaleToFill: self.options.scaleToFill,
             subtitles: self.options.subtitles,
             timeline: self.options.timeline,
@@ -103,6 +105,9 @@ Ox.VideoPanelPlayer = function(options, self) {
                 setPosition(data);
                 that.triggerEvent('position', data);
             },
+            resolution: function(data) {
+                that.triggerEvent('resolution', data);
+            },
             scale: function(data) {
                 that.triggerEvent('scale', data);
             },

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

@@ -1112,6 +1112,7 @@ Ox.VideoPlayer = function(options, self) {
             self.iconIsVisible = true;
         }
         self.options.rewind && rewind();
+        that.triggerEvent('ended');
     }
 
     function find(query) {
@@ -1806,6 +1807,9 @@ Ox.VideoPlayer = function(options, self) {
         self.$playButton && self.$playButton.options({
             disabled: true
         });
+        that.triggerEvent('resolution', {
+            resolution: self.options.resolution
+        });
     }
 
     function setSize($element, css, animate, callback) {
@@ -2244,6 +2248,8 @@ Ox.VideoPlayer = function(options, self) {
             setPosition(value);
         } else if (key == 'posterFrame') {
             self.options.paused && setMarkers();
+        } else if (key == 'resolution') {
+            setResolution();
         } else if (key == 'scaleToFill') {
             toggleScale();
         }