add playbackRate to video elements

source/UI/js/Video/VideoAnnotationPanel.js

@@ -78,6 +78,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 muted: false,
                 out: 0,
                 paused: true,
+                playbackRate: 1,
                 position: 0,
                 posterFrame: 0,
                 resolution: 0,
@@ -119,6 +120,11 @@ Ox.VideoAnnotationPanel = function(options, self) {
                         paused: self.options.paused
                     });
                 },
+                playbackRate: function() {
+                    self.$player[0].options({
+                        playbackRate: self.options.playbackRate
+                    });
+                },
                 position: function() {
                     setPosition(self.options.position);
                 },
@@ -397,6 +403,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 muted: self.options.muted,
                 out: self.options.out,
                 paused: self.options.paused,
+                playbackRate: self.options.playbackRate,
                 position: type == 'play' ? self.options.position : self.options[type],
                 posterFrame: self.options.posterFrame,
                 resolution: self.options.resolution,

source/UI/js/Video/VideoEditPanel.js

@@ -33,6 +33,7 @@ Ox.VideoEditPanel = function(options, self) {
             muted: false,
             out: 0,
             paused: true,
+            playbackRate: 1,
             playInToOut: false,
             position: 0,
             resolution: 0,
@@ -89,6 +90,9 @@ Ox.VideoEditPanel = function(options, self) {
             paused: function() {
                 self.$video.options({paused: self.options.paused});
             },
+            playbackRate: function() {
+                self.$video.options({playbackRate: self.options.playbackRate});
+            },
             position: function() {
                 self.$video.options({position: self.options.position});
                 self.$timeline.options({position: self.options.position});
@@ -233,6 +237,7 @@ Ox.VideoEditPanel = function(options, self) {
             loop: self.options.loop,
             muted: self.options.muted,
             out: self.options.out,
+            playbackRate: self.options.playbackRate,
             paused: self.options.paused,
             position: self.options.position,
             resolution: self.options.resolution,

source/UI/js/Video/VideoElement.js

@@ -6,6 +6,7 @@ Ox.VideoElement <f> VideoElement Object
         autoplay <b|false> autoplay
         items <a|[]> array of objects with src,in,out,duration
         loop <b|false> loop playback
+        playbackRate <n|1> playback rate
     self <o> Shared private variable
     ([options[, self]]) -> <o:Ox.Element> VideoElement Object
         loadedmetadata <!> loadedmetadata
@@ -23,6 +24,7 @@ Ox.VideoElement = function(options, self) {
         .defaults({
             autoplay: false,
             loop: false,
+            playbackRate: 1,
             items: []
         })
         .options(options || {})
@@ -67,11 +69,13 @@ Ox.VideoElement = function(options, self) {
                                 that.triggerEvent('durationchange', {
                                     duration: that.duration()
                                 });
-                            
                             });
                         }
                     }
                 });
+            },
+            playbackRate: function() {
+                self.video.playbackRate = self.options.playbackRate;
             }
         })
         .css({width: '100%', height: '100%'});
@@ -157,7 +161,6 @@ Ox.VideoElement = function(options, self) {
                             }
                         });
                     }
-                    
                 },
                 seeking: function() {
                     //seeking event triggered in setCurrentTime
@@ -317,6 +320,7 @@ Ox.VideoElement = function(options, self) {
         }
         self.video.volume = volume;
         self.video.muted = muted;
+        self.video.playbackRate = self.options.playbackRate;
         self.$video.css(css);
         self.buffering = true;
         Ox.Log('Video', 'sCV', self.video.src, item['in'],

source/UI/js/Video/VideoPlayer.js

@@ -47,6 +47,7 @@ Ox.VideoPlayer <f> Generic Video Player
         loop <b|false> If true, video loops
         muted <b|false> If true, video is muted
         paused <b|false> If true, video is paused
+        playbackRate: <n|1> playback rate
         playInToOut <b|false> If true, video plays only from in to out
         position <n|0> Initial position (sec)
         poster <s|''> Poster URL
@@ -148,6 +149,7 @@ Ox.VideoPlayer = function(options, self) {
             loop: false,
             muted: false,
             paused: false,
+            playbackRate: 1,
             playInToOut: false,
             position: 0,
             poster: '',
@@ -207,6 +209,11 @@ Ox.VideoPlayer = function(options, self) {
                 self.options.paused = !self.options.paused;
                 togglePaused();
             },
+            playbackRate: function() {
+                self.$video.options({
+                    playbackRate: self.options.playbackRate
+                });
+            },
             position: function() {
                 setPosition(self.options.position);
             },
@@ -430,7 +437,8 @@ Ox.VideoPlayer = function(options, self) {
         });
 
         self.$video = Ox.VideoElement({
-                items: self.video
+                items: self.video,
+                playbackRate: self.options.playbackRate
             })
             .bindEvent(Ox.extend({
                 durationchange: durationchange,

source/UI/js/Video/VideoTimelinePanel.js

@@ -55,6 +55,7 @@ Ox.VideoTimelinePanel = function(options, self) {
                 muted: false,
                 out: 0,
                 paused: true,
+                playbackRate: 1,
                 position: 0,
                 resolution: 0,
                 selected: '',
@@ -79,6 +80,9 @@ Ox.VideoTimelinePanel = function(options, self) {
                 paused: function() {
                     self.$player.options({paused: self.options.paused});
                 },
+                playbackRate: function() {
+                    self.$player.options({playbackRate: self.options.playbackRate});
+                },
                 position: function() {
                     setPosition(self.options.position);
                 },
@@ -121,6 +125,7 @@ Ox.VideoTimelinePanel = function(options, self) {
             height: self.options.height,
             muted: self.options.muted,
             paused: self.options.paused,
+            playbackRate: self.options.playbackRate,
             position: self.options.position,
             resolution: self.options.resolution,
             smallTimelineURL: self.options.smallTimelineURL,