From f2e7c75d2ccf2df2d59e3b4b07a4871ad9dab3bc Mon Sep 17 00:00:00 2001 From: j Date: Tue, 29 Mar 2016 14:26:04 +0200 Subject: [PATCH] add playbackRate to video elements --- source/UI/js/Video/VideoAnnotationPanel.js | 7 +++++++ source/UI/js/Video/VideoEditPanel.js | 5 +++++ source/UI/js/Video/VideoElement.js | 8 ++++++-- source/UI/js/Video/VideoPlayer.js | 10 +++++++++- source/UI/js/Video/VideoTimelinePanel.js | 5 +++++ 5 files changed, 32 insertions(+), 3 deletions(-) diff --git a/source/UI/js/Video/VideoAnnotationPanel.js b/source/UI/js/Video/VideoAnnotationPanel.js index 82bb94f4..1f317fa0 100644 --- a/source/UI/js/Video/VideoAnnotationPanel.js +++ b/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, diff --git a/source/UI/js/Video/VideoEditPanel.js b/source/UI/js/Video/VideoEditPanel.js index fc4ea93b..72b02270 100644 --- a/source/UI/js/Video/VideoEditPanel.js +++ b/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, diff --git a/source/UI/js/Video/VideoElement.js b/source/UI/js/Video/VideoElement.js index 99c99f82..e63b17b7 100644 --- a/source/UI/js/Video/VideoElement.js +++ b/source/UI/js/Video/VideoElement.js @@ -6,6 +6,7 @@ Ox.VideoElement VideoElement Object autoplay autoplay items array of objects with src,in,out,duration loop loop playback + playbackRate playback rate self Shared private variable ([options[, self]]) -> 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'], diff --git a/source/UI/js/Video/VideoPlayer.js b/source/UI/js/Video/VideoPlayer.js index 9a54b681..32852609 100644 --- a/source/UI/js/Video/VideoPlayer.js +++ b/source/UI/js/Video/VideoPlayer.js @@ -47,6 +47,7 @@ Ox.VideoPlayer Generic Video Player loop If true, video loops muted If true, video is muted paused If true, video is paused + playbackRate: playback rate playInToOut If true, video plays only from in to out position Initial position (sec) poster 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, diff --git a/source/UI/js/Video/VideoTimelinePanel.js b/source/UI/js/Video/VideoTimelinePanel.js index d7f12aa7..7e51d077 100644 --- a/source/UI/js/Video/VideoTimelinePanel.js +++ b/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,