Merge pull request #262 from sebbayer/bugfix/speed-keyboard-controls

digitas-git · web-flow · commit 4118c7972ab4 · 2024-09-06T16:14:03.000+02:00
Fix speed plugin always controlling the first player on the page via …
diff --git a/demo/index.html b/demo/index.html
@@ -78,6 +78,7 @@ <h1><img src="https://cloud.githubusercontent.com/assets/910829/22357262/e6cf32b
                     <li><a href="postroll.html">Postroll</a></li>
                     <li><a href="preview.html">Preview</a></li>
                     <li><a href="quality.html">Quality</a></li>
+                    <li><a href="speed.html">Speed</a></li>
                     <li><a href="vrview.html">VRView</a></li>
                 </ul>
             </main>
diff --git a/demo/speed.html b/demo/speed.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>MediaElement.js 3.0 - Speed Plugin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.1/mediaelementplayer.css">
+    <link rel="stylesheet" href="../dist/speed/speed.css">
+    <link rel="stylesheet" href="demo.css">
+</head>
+<body>
+<div id="container">
+
+    <h1>Speed Plugin</h1>
+    <p><a href="index.html">Back to Main</a></p>
+
+    <p>This plugin allows the generation of a menu with different video/audio speed.</p>
+
+    <h2>Video Player</h2>
+
+    <div class="media-wrapper">
+        <h3>Video Player 1</h3>
+        <video id="player1" width="750" height="421" controls preload="none" poster="http://mediaelementjs.com/images/big_buck_bunny.jpg">
+            <source type="video/mp4" src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_native_60fps_normal.mp4">
+        </video>
+        <h3>Video Player 2</h3>
+        <video id="player2" width="750" height="421" controls preload="none" poster="http://mediaelementjs.com/images/big_buck_bunny.jpg">
+            <source type="video/mp4" src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_native_60fps_normal.mp4">
+        </video>
+    </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.1/mediaelement-and-player.min.js"></script>
+<script src="../dist/speed/speed.js"></script>
+<script>
+	var mediaElements = document.querySelectorAll('video, audio');
+
+	for (var i = 0, total = mediaElements.length; i < total; i++) {
+		new MediaElementPlayer(mediaElements[i], {
+			features: ['playpause', 'current', 'progress', 'duration', 'speed'],
+		});
+	}
+</script>
+</body>
+</html>
diff --git a/src/speed/speed.js b/src/speed/speed.js
@@ -141,6 +141,13 @@ Object.assign(MediaElementPlayer.prototype, {
 			labels = player.speedButton.querySelectorAll(`.${t.options.classPrefix}speed-selector-label`)
 		;
 
+		/**
+		 * Store a reference to the radio buttons to prevent a scope bug in keyboard events
+		 * when multiple MediaElement players are on the same page. Otherwise these keyboard
+		 * events would always control the first speed button instance on the page.
+		 */
+		player.speedRadioButtons = radios;
+
 		// hover or keyboard focus
 		for (let i = 0, total = inEvents.length; i < total; i++) {
 			player.speedButton.addEventListener(inEvents[i], () => {
@@ -202,9 +209,10 @@ Object.assign(MediaElementPlayer.prototype, {
 				if (event.key != '<')
 					return;
 
-				for (let i = 0; i < radios.length - 1; i++) {
-					if (radios[i].checked) {
-						const nextRadio = radios[i+1];
+				const _radios = player.speedRadioButtons;
+				for (let i = 0; i < _radios.length - 1; i++) {
+					if (_radios[i].checked) {
+						const nextRadio = _radios[i+1];
 						nextRadio.dispatchEvent(mejs.Utils.createEvent('click', nextRadio));
 						break;
 					}
@@ -216,9 +224,10 @@ Object.assign(MediaElementPlayer.prototype, {
 				if (event.key != '>')
 					return;
 
-				for (let i = 1; i < radios.length; i++) {
-					if (radios[i].checked) {
-						const prevRadio = radios[i-1];
+				const _radios = player.speedRadioButtons;
+				for (let i = 1; i < _radios.length; i++) {
+					if (_radios[i].checked) {
+						const prevRadio = _radios[i-1];
 						prevRadio.dispatchEvent(mejs.Utils.createEvent('click', prevRadio));
 						break;
 					}
