Skip to content

Commit a54f0b5

Browse files
sebbayersebbayer
committed
Fix speed plugin always controlling the first player on the page via keyboard when multiple players exist
1 parent 42dc804 commit a54f0b5

3 files changed

Lines changed: 66 additions & 6 deletions

File tree

‎demo/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ <h1><img src="https://cloud.githubusercontent.com/assets/910829/22357262/e6cf32b
7878
<li><a href="postroll.html">Postroll</a></li>
7979
<li><a href="preview.html">Preview</a></li>
8080
<li><a href="quality.html">Quality</a></li>
81+
<li><a href="speed.html">Speed</a></li>
8182
<li><a href="vrview.html">VRView</a></li>
8283
</ul>
8384
</main>

‎demo/speed.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>MediaElement.js 3.0 - Speed Plugin</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
9+
<link rel="icon" href="favicon.ico" type="image/x-icon">
10+
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.1/mediaelementplayer.css">
13+
<link rel="stylesheet" href="../dist/speed/speed.css">
14+
<link rel="stylesheet" href="demo.css">
15+
</head>
16+
<body>
17+
<div id="container">
18+
19+
<h1>Speed Plugin</h1>
20+
<p><a href="index.html">Back to Main</a></p>
21+
22+
<p>This plugin allows the generation of a menu with different video/audio speed.</p>
23+
24+
<h2>Video Player</h2>
25+
26+
<div class="media-wrapper">
27+
<h3>Video Player 1</h3>
28+
<video id="player1" width="750" height="421" controls preload="none" poster="http://mediaelementjs.com/images/big_buck_bunny.jpg">
29+
<source type="video/mp4" src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_native_60fps_normal.mp4">
30+
</video>
31+
<h3>Video Player 2</h3>
32+
<video id="player2" width="750" height="421" controls preload="none" poster="http://mediaelementjs.com/images/big_buck_bunny.jpg">
33+
<source type="video/mp4" src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_native_60fps_normal.mp4">
34+
</video>
35+
</div>
36+
</div>
37+
38+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.1/mediaelement-and-player.min.js"></script>
39+
<script src="../dist/speed/speed.js"></script>
40+
<script>
41+
var mediaElements = document.querySelectorAll('video, audio');
42+
43+
for (var i = 0, total = mediaElements.length; i < total; i++) {
44+
new MediaElementPlayer(mediaElements[i], {
45+
features: ['playpause', 'current', 'progress', 'duration', 'speed'],
46+
});
47+
}
48+
</script>
49+
</body>
50+
</html>

‎dist/speed/speed.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,13 @@ Object.assign(MediaElementPlayer.prototype, {
100100
radios = player.speedButton.querySelectorAll('input[type="radio"]'),
101101
labels = player.speedButton.querySelectorAll('.' + t.options.classPrefix + 'speed-selector-label');
102102

103+
/**
104+
* Store a reference to the radio buttons to prevent a scope bug in keyboard events
105+
* with multiple MediaElement players are on the same page. Otherwise these keyboard
106+
* events would always control the first speed button instance on the page.
107+
*/
108+
player.speedRadioButtons = radios;
109+
103110
for (var _i2 = 0, _total2 = inEvents.length; _i2 < _total2; _i2++) {
104111
player.speedButton.addEventListener(inEvents[_i2], function () {
105112
mejs.Utils.removeClass(player.speedSelector, t.options.classPrefix + 'offscreen');
@@ -154,9 +161,10 @@ Object.assign(MediaElementPlayer.prototype, {
154161
action: function action(player, media, key, event) {
155162
if (event.key != '<') return;
156163

157-
for (var _i7 = 0; _i7 < radios.length - 1; _i7++) {
158-
if (radios[_i7].checked) {
159-
var nextRadio = radios[_i7 + 1];
164+
const _radios = player.speedRadioButtons;
165+
for (var _i7 = 0; _i7 < _radios.length - 1; _i7++) {
166+
if (_radios[_i7].checked) {
167+
var nextRadio = _radios[_i7 + 1];
160168
nextRadio.dispatchEvent(mejs.Utils.createEvent('click', nextRadio));
161169
break;
162170
}
@@ -167,9 +175,10 @@ Object.assign(MediaElementPlayer.prototype, {
167175
action: function action(player, media, key, event) {
168176
if (event.key != '>') return;
169177

170-
for (var _i8 = 1; _i8 < radios.length; _i8++) {
171-
if (radios[_i8].checked) {
172-
var prevRadio = radios[_i8 - 1];
178+
const _radios = player.speedRadioButtons;
179+
for (var _i8 = 1; _i8 < _radios.length; _i8++) {
180+
if (_radios[_i8].checked) {
181+
var prevRadio = _radios[_i8 - 1];
173182
prevRadio.dispatchEvent(mejs.Utils.createEvent('click', prevRadio));
174183
break;
175184
}

0 commit comments

Comments
 (0)