Merge pull request #40 from instructure/feat-fix-playback-ie11

Support changing the playbackRate in IE11
instructure · Nov 14, 2017 · 83c429f · 83c429f
2 parents 0402b2b + a79da02
commit 83c429f
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 15 deletions.
diff --git a/build/mediaelement-and-player.js b/build/mediaelement-and-player.js
@@ -4227,8 +4227,10 @@ function constrainedSeekTo(player, media, targetTime) {
 			};
 			togglePlayPause('pse');
 
-
 			media.addEventListener('play',function() {
+                               if (t.options.playbackRate) {
+                                 media.playbackRate = t.options.playbackRate;
+                               }
 				togglePlayPause('play');
 			}, false);
 			media.addEventListener('playing',function() {
@@ -4237,6 +4239,9 @@ function constrainedSeekTo(player, media, targetTime) {
 
 
 			media.addEventListener('pause',function() {
+                               if (t.options.playbackRate) {
+                                 media.playbackRate = t.options.playbackRate;
+                               }
 				togglePlayPause('pse');
 			}, false);
 			media.addEventListener('paused',function() {
@@ -5574,8 +5579,16 @@ function constrainedSeekTo(player, media, targetTime) {
 
 						var newSpeed = $(this).attr('value');
 						playbackSpeed = newSpeed;
-						media.playbackRate = parseFloat(newSpeed);
-						speedButton.find('button')
+                                               var newPlaybackRate = parseFloat(newSpeed);
+						media.playbackRate = newPlaybackRate;
+
+                                               // IE11 doesn't remember the user-selected playbackRate once
+                                               // clicking play/pause after setting the rate, so we save
+                                               // the value to `this` and reference it in the play/pause handler
+                                               // see: mep-feature-playpause.js
+                                               t.options.playbackRate = newPlaybackRate;
+
+                                               speedButton.find('button')
 							.html(getSpeedNameFromValue(newSpeed))
 							.attr('aria-label', speedLabel(newSpeed));
 						speedButton.find('.mejs-speed-selected').removeClass('mejs-speed-selected');

diff --git a/build/mediaelement-and-player.min.js b/build/mediaelement-and-player.min.js
diff --git a/build/mediaelementplayer.js b/build/mediaelementplayer.js
@@ -1736,8 +1736,10 @@ function constrainedSeekTo(player, media, targetTime) {
 			};
 			togglePlayPause('pse');
 
-
 			media.addEventListener('play',function() {
+                               if (t.options.playbackRate) {
+                                 media.playbackRate = t.options.playbackRate;
+                               }
 				togglePlayPause('play');
 			}, false);
 			media.addEventListener('playing',function() {
@@ -1746,6 +1748,9 @@ function constrainedSeekTo(player, media, targetTime) {
 
 
 			media.addEventListener('pause',function() {
+                               if (t.options.playbackRate) {
+                                 media.playbackRate = t.options.playbackRate;
+                               }
 				togglePlayPause('pse');
 			}, false);
 			media.addEventListener('paused',function() {
@@ -3083,8 +3088,16 @@ function constrainedSeekTo(player, media, targetTime) {
 
 						var newSpeed = $(this).attr('value');
 						playbackSpeed = newSpeed;
-						media.playbackRate = parseFloat(newSpeed);
-						speedButton.find('button')
+                                               var newPlaybackRate = parseFloat(newSpeed);
+						media.playbackRate = newPlaybackRate;
+
+                                               // IE11 doesn't remember the user-selected playbackRate once
+                                               // clicking play/pause after setting the rate, so we save
+                                               // the value to `this` and reference it in the play/pause handler
+                                               // see: mep-feature-playpause.js
+                                               t.options.playbackRate = newPlaybackRate;
+
+                                               speedButton.find('button')
 							.html(getSpeedNameFromValue(newSpeed))
 							.attr('aria-label', speedLabel(newSpeed));
 						speedButton.find('.mejs-speed-selected').removeClass('mejs-speed-selected');

diff --git a/build/mediaelementplayer.min.js b/build/mediaelementplayer.min.js
diff --git a/src/js/mep-feature-playpause.js b/src/js/mep-feature-playpause.js
@@ -50,8 +50,10 @@
 			};
 			togglePlayPause('pse');
 
-
 			media.addEventListener('play',function() {
+                               if (t.options.playbackRate) {
+                                 media.playbackRate = t.options.playbackRate;
+                               }
 				togglePlayPause('play');
 			}, false);
 			media.addEventListener('playing',function() {
@@ -60,6 +62,9 @@
 
 
 			media.addEventListener('pause',function() {
+                               if (t.options.playbackRate) {
+                                 media.playbackRate = t.options.playbackRate;
+                               }
 				togglePlayPause('pse');
 			}, false);
 			media.addEventListener('paused',function() {

diff --git a/src/js/mep-feature-speed.js b/src/js/mep-feature-speed.js
@@ -115,8 +115,16 @@
 
 						var newSpeed = $(this).attr('value');
 						playbackSpeed = newSpeed;
-						media.playbackRate = parseFloat(newSpeed);
-						speedButton.find('button')
+                                               var newPlaybackRate = parseFloat(newSpeed);
+						media.playbackRate = newPlaybackRate;
+
+                                               // IE11 doesn't remember the user-selected playbackRate once
+                                               // clicking play/pause after setting the rate, so we save
+                                               // the value to `this` and reference it in the play/pause handler
+                                               // see: mep-feature-playpause.js
+                                               t.options.playbackRate = newPlaybackRate;
+
+                                               speedButton.find('button')
 							.html(getSpeedNameFromValue(newSpeed))
 							.attr('aria-label', speedLabel(newSpeed));
 						speedButton.find('.mejs-speed-selected').removeClass('mejs-speed-selected');