handle video formats and resolutions

source/Ox.UI/Ox.UI.js

@@ -271,7 +271,6 @@ Ox.load.UI = function(options, callback) {
         Ox.UI.getImageName = function(url) {
             return imageNames[url];
         };
-
         Ox.UI.getImageURL = function(name, theme) {
             theme = theme || Ox.Theme();
             // fixme: not the best idea to do this here
@@ -280,6 +279,35 @@ Ox.load.UI = function(options, callback) {
             }
             return imageURLs[theme + '/' + name];
         };
+        Ox.UI.getVideoFormat = function(formats) {
+            var aliases = {
+                    'mp4': 'h264',
+                    'm4v': 'h264',
+                    'ogv': 'ogg'
+                },
+                format,
+                tests = {
+                    'h264': 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+                    'ogg': 'video/ogg; codecs="theora, vorbis"',
+                    'webm': 'video/webm; codecs="vp8, vorbis"'
+                },
+                userAgent = navigator.userAgent.toLowerCase();
+                video = document.createElement('video');
+            Ox.forEach(formats, function(f) {
+                var alias = aliases[f] || f;
+                if (!!(video.canPlayType && video.canPlayType(tests[alias]).replace('no', ''))) {
+                    // disable WebM on Safari/Perian, seeking does not work
+                    if (!(
+                        alias == 'webm' && /safari/.test(userAgent)
+                        && !/chrome/.test(userAgent) && !/linux/.test(userAgent)
+                    )) {
+                        format = f;
+                        return false;
+                    }
+                }
+            });
+            return format;
+        },
         Ox.UI.hideLoadingScreen = function() {
             //Ox.print('hideLoadingScreen')
             var $div = $('.OxLoadingScreen'),

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

@@ -31,8 +31,7 @@ Ox.VideoEditor = function(options, self) {
                 showAnnotations: false,
                 showLargeTimeline: true,
                 subtitles: [],
-                videoHeight: 0,
+                videoRatio: 16/9,
-                videoWidth: 0,
                 videoSize: 'small',
                 video: '',
                 width: 0
@@ -140,7 +139,6 @@ Ox.VideoEditor = function(options, self) {
         $timeline: [],
         controlsHeight: 16,
         margin: 8,
-        videoRatio: self.options.videoWidth / self.options.videoHeight
     });
 
     self.words = [];
@@ -772,7 +770,7 @@ Ox.VideoEditor = function(options, self) {
                     left: (i + 0.5) * self.margin + width,
                     top: self.margin / 2,
                     width: widths[i],
-                    height: Math.round(widths[1] / self.videoRatio)
+                    height: Math.round(widths[1] / self.options.videoRatio)
                 };
                 width += widths[i];
             });
@@ -780,15 +778,15 @@ Ox.VideoEditor = function(options, self) {
             size.player[0] = {
                 left: self.margin / 2,
                 top: self.margin / 2,
-                width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3),
+                width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.options.videoRatio) * 2/3),
             };
-            size.player[0].height = Math.round(size.player[0].width / self.videoRatio);
+            size.player[0].height = Math.round(size.player[0].width / self.options.videoRatio);
             size.player[1] = {
                 left: size.player[0].left + size.player[0].width + self.margin,
                 top: size.player[0].top,
                 width: contentWidth - 3 * self.margin - size.player[0].width
             };
-            size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio);
+            size.player[1].height = Math.ceil(size.player[1].width / self.options.videoRatio);
             size.player[2] = {
                 left: size.player[1].left,
                 top: size.player[0].top + size.player[1].height + self.controlsHeight + self.margin,

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

@@ -39,6 +39,8 @@ Ox.VideoElement = function(options, self) {
                         setCurrentPart(self.currentPart + 1);
                         self.video.play();
                     } else {
+                        self.ended = true;
+                        self.paused = true;
                         that.triggerEvent('ended');
                     }
                 },
@@ -89,7 +91,6 @@ Ox.VideoElement = function(options, self) {
     }
 
     function setCurrentPart(part) {
-        Ox.print('sCP', part)
         var css = {};
         ['left', 'top', 'width', 'height'].forEach(function(key) {
             css[key] = self.$video.css(key);
@@ -130,6 +131,7 @@ Ox.VideoElement = function(options, self) {
 
     that.currentTime = function() {
         var ret;
+        self.ended = false;
         if (arguments.length == 0) {
             ret = getCurrentTime();
         } else {
@@ -159,6 +161,10 @@ Ox.VideoElement = function(options, self) {
     };
 
     that.play = function() {
+        if (self.ended) {
+            that.currentTime(0);
+            self.ended = false;
+        }
         self.paused = false;
         self.video.play();
         return that;

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

@@ -29,8 +29,6 @@ Ox.VideoPanelPlayer = function(options, self) {
                 showControls: true,
                 subtitles: [],
                 video: '',
-                videoHeight: 0,
-                videoWidth: 0,
                 volume: 1,
                 width: 0
             })

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

@@ -124,6 +124,8 @@ Ox.VideoPlayer = function(options, self) {
         .options(options || {})
         .addClass('OxVideoPlayer');
 
+    Ox.print('VIDEO PLAYER OPTIONS', self.options)
+
     Ox.UI.$window.bind({
         resize: function() {
             self.options.fullscreen && setSizes();
@@ -133,14 +135,11 @@ 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];
         }
         self.video = self.options.video[self.options.resolution];
-        */
-        self.video = self.options.video(self.options.resolution, self.options.format)
     }
 
     if (self.options.playInToOut) {
@@ -238,12 +237,12 @@ Ox.VideoPlayer = function(options, self) {
             mouseenter: function() {
                 showControls();
                 self.mouseHasLeft = false;
-                Ox.print('MOUSE HAS ENTERED')
+                //Ox.print('MOUSE HAS ENTERED')
             },
             mouseleave: function() {
                 hideControls();
                 self.mouseHasLeft = true;
-                Ox.print('MOUSE HAS LEFT')
+                //Ox.print('MOUSE HAS LEFT')
             }
         });
     }