Skip to content

Commit 13855ba

Browse files
authored
Merge pull request mediaelement#270 from mediaelement/release_5.1.0
release 5.1.0
2 parents 6b5de46 + 3e2e070 commit 13855ba

File tree

8 files changed

+291
-72
lines changed

8 files changed

+291
-72
lines changed

RELEASE.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Instructions for the Maintainer
3030

3131
grunt
3232

33-
- add/commit/push all including build/
33+
- add/commit/push all including dist/
3434

3535
```
3636
git add --all

changelog.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Version History
22

3+
## *5.1.0 (2026/01/30)*
4+
* `mediaelement` is now a `peerDependency` of this project. This will prevent multiple installations of `mediaelement` in your project.
5+
### A11Y PLUGIN
6+
* Demo page was updated with working media assets. Fixes #261
7+
* Plugin is now cleaned up properly when the player is destroyed.
8+
39
## *5.0.0 (2024/09/12)*
410
### JUMP FORWARD PLUGIN
511
#### New Feature: Inline SVG icon for jump forward button

demo/a11y.html

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,39 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<title>MediaElement.js 4.2 - Accessibility Plugin</title>
7-
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
8-
<link rel="icon" href="favicon.ico" type="image/x-icon">
6+
<title>MediaElement.js 7.0.7 - Accessibility Plugin</title>
7+
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
8+
<link rel="icon" href="./favicon.ico" type="image/x-icon">
99

1010
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
11-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.3/mediaelementplayer.css">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.7/mediaelementplayer.min.css">
1212
<link rel="stylesheet" href="../dist/a11y/a11y.css">
13-
<link rel="stylesheet" href="demo.css">
13+
<link rel="stylesheet" href="./demo.css">
1414
</head>
1515
<body>
1616
<div id="container">
1717
<h1>Accessibility Plugin</h1>
18-
<p><a href="index.html">Back to Main</a> </p>
18+
<p><a href="./index.html">Back to Main</a> </p>
1919

2020
<h2>Video Player (w/o Voice-Over)</h2>
2121
<div class="media-wrapper">
2222
<video id="player1" width="750" height="421" controls preload="none" playsinline
23-
data-video-description='[{"src": "https://video.aktion-mensch.de/magnolia/aktion-mensch-videoplayer/aktion-mensch_beispiel/aktion-mensch_beispiel_signlanguageVideo.mp4", "type": "video/mp4"}, {"src": "https://video.aktion-mensch.de/magnolia/aktion-mensch-videoplayer/aktion-mensch_beispiel/aktion-mensch_beispiel_signlanguageVideo.webm", "type": "video/webm"}, {"src": "https://video.aktion-mensch.de/magnolia/aktion-mensch-videoplayer/aktion-mensch_beispiel/aktion-mensch_beispiel_signlanguageVideo.ogv", "type": "video/ogv"}]'
24-
data-audio-description='[{"src": "https://video.aktion-mensch.de/magnolia/aktion-mensch_beispiel_audioDescription.mp3", "type": "audio/mp3"}]'
23+
poster="https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/2e7945298d864445b79c120be1eeb87c"
24+
data-video-description='[{"src": "https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/video-kampagne-begegnung-dgs.mp4", "type": "video/mp4"}]'
25+
data-audio-description='[{"src": "https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/72091bbef9494cc6a8da57179d69099c", "type": "audio/x-wav"}]'
2526
>
26-
<source src="https://video.aktion-mensch.de/magnolia/aktion-mensch_beispiel_video.mp4" type="video/mp4" />
27-
<source src="https://video.aktion-mensch.de/magnolia/aktion-mensch_beispiel_video.webm" type="video/webm" />
28-
<source src="https://video.aktion-mensch.de/magnolia/aktion-mensch_beispiel_video.ogv" type="video/ogg" />
27+
<source src="https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/0e7a69b999dc4dad8b632d323909d1a1" type="video/mp4" />
2928
</video>
29+
<button onclick="player.remove()" style="margin: 20px 0">Remove</button>
3030
</div>
3131
</div>
32-
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.min.js"></script>
32+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.7/mediaelement-and-player.min.js"></script>
3333
<script src="../dist/a11y/a11y.js"></script>
3434
<script>
35-
new MediaElementPlayer('player1', {
35+
const player = new MediaElementPlayer('player1', {
3636
features: ['playpause', 'current', 'progress', 'duration', 'volume', 'a11y', 'fullscreen'],
37+
iconSprite: 'mejs-controls.svg',
38+
iconSpritePathA11y: 'mejs-a11y-icons.svg'
3739
});
3840
</script>
3941
</body>

dist/a11y/a11y.js

Lines changed: 123 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -51,18 +51,95 @@ Object.assign(MediaElementPlayer.prototype, {
5151
if (t.options.audioDescriptionSource) t._createAudioDescription();
5252
if (t.options.videoDescriptionSource) t._createVideoDescription();
5353

54-
t.media.addEventListener('play', function () {
54+
t.a11yPlayHandler = function () {
5555
return t.options.isPlaying = true;
56-
});
57-
t.media.addEventListener('playing', function () {
56+
};
57+
t.a11yPlayingHandler = function () {
5858
return t.options.isPlaying = true;
59-
});
60-
t.media.addEventListener('pause', function () {
59+
};
60+
t.a11yPauseHandler = function () {
6161
return t.options.isPlaying = false;
62-
});
63-
t.media.addEventListener('ended', function () {
62+
};
63+
t.a11yEndedHandler = function () {
6464
return t.options.isPlaying = false;
65-
});
65+
};
66+
67+
t.media.addEventListener('play', t.a11yPlayHandler);
68+
t.media.addEventListener('playing', t.a11yPlayingHandler);
69+
t.media.addEventListener('pause', t.a11yPauseHandler);
70+
t.media.addEventListener('ended', t.a11yEndedHandler);
71+
},
72+
cleana11y: function cleana11y(player, layers, controls, media) {
73+
var t = this;
74+
75+
if (t.a11yPlayHandler) {
76+
media.removeEventListener('play', t.a11yPlayHandler);
77+
media.removeEventListener('playing', t.a11yPlayingHandler);
78+
media.removeEventListener('pause', t.a11yPauseHandler);
79+
media.removeEventListener('ended', t.a11yEndedHandler);
80+
}
81+
82+
if (t.audioDescriptionButton && t.audioDescriptionClickHandler) {
83+
t.audioDescriptionButton.removeEventListener('click', t.audioDescriptionClickHandler);
84+
t.audioDescriptionButton = null;
85+
t.audioDescriptionClickHandler = null;
86+
}
87+
88+
if (t.videoDescriptionButton && t.videoDescriptionClickHandler) {
89+
t.videoDescriptionButton.removeEventListener('click', t.videoDescriptionClickHandler);
90+
t.videoDescriptionButton = null;
91+
t.videoDescriptionClickHandler = null;
92+
}
93+
94+
if (t.audioDescription) {
95+
if (t.audioDescriptionPlayHandler) {
96+
media.removeEventListener('play', t.audioDescriptionPlayHandler);
97+
}
98+
if (t.audioDescriptionPlayingHandler) {
99+
media.removeEventListener('playing', t.audioDescriptionPlayingHandler);
100+
}
101+
if (t.audioDescriptionPauseHandler) {
102+
media.removeEventListener('pause', t.audioDescriptionPauseHandler);
103+
}
104+
if (t.audioDescriptionWaitingHandler) {
105+
media.removeEventListener('waiting', t.audioDescriptionWaitingHandler);
106+
}
107+
if (t.audioDescriptionEndedHandler) {
108+
media.removeEventListener('ended', t.audioDescriptionEndedHandler);
109+
}
110+
if (t.audioDescriptionTimeupdateHandler) {
111+
media.removeEventListener('timeupdate', t.audioDescriptionTimeupdateHandler);
112+
}
113+
if (t.audioDescriptionVolumechangeHandler) {
114+
media.removeEventListener('volumechange', t.audioDescriptionVolumechangeHandler);
115+
}
116+
if (t.audioDescriptionCanplayHandler) {
117+
t.audioDescription.node.removeEventListener('canplay', t.audioDescriptionCanplayHandler);
118+
}
119+
120+
var clonedAudioId = t.audioDescription.node.getAttribute('id').replace('_' + media.rendererName, '');
121+
122+
t.audioDescription.remove();
123+
t.audioDescription = null;
124+
125+
var clonedAudioElement = document.getElementById(clonedAudioId);
126+
if (clonedAudioElement) {
127+
clonedAudioElement.parentNode.removeChild(clonedAudioElement);
128+
}
129+
}
130+
131+
if (t.videoVolumeButton) {
132+
mejs.Utils.removeClass(t.videoVolumeButton, 'hidden');
133+
t.videoVolumeButton = null;
134+
}
135+
136+
if (t.descriptiveVolumeButton) {
137+
t.descriptiveVolumeButton = null;
138+
}
139+
140+
t.options.audioDescriptionToggled = false;
141+
t.options.videoDescriptionToggled = false;
142+
t.options.audioDescriptionCanPlay = false;
66143
},
67144
_getFirstChildNodeByClassName: function _getFirstChildNodeByClassName(parentNode, className) {
68145
return [].concat(_toConsumableArray(parentNode.childNodes)).find(function (node) {
@@ -82,12 +159,15 @@ Object.assign(MediaElementPlayer.prototype, {
82159

83160
t.addControlElement(audioDescriptionButton, 'audio-description');
84161

85-
audioDescriptionButton.addEventListener('click', function () {
162+
t.audioDescriptionButton = audioDescriptionButton;
163+
t.audioDescriptionClickHandler = function () {
86164
t.options.audioDescriptionToggled = !t.options.audioDescriptionToggled;
87165
mejs.Utils.toggleClass(audioDescriptionButton, 'audio-description-on');
88166

89167
t._toggleAudioDescription();
90-
});
168+
};
169+
170+
audioDescriptionButton.addEventListener('click', t.audioDescriptionClickHandler);
91171
},
92172
_createVideoDescription: function _createVideoDescription() {
93173
var t = this;
@@ -98,12 +178,15 @@ Object.assign(MediaElementPlayer.prototype, {
98178
videoDescriptionButton.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + videoDescriptionTitle + '" aria-label="' + videoDescriptionTitle + '" tabindex="0">' + iconHtml + '</button>';
99179
t.addControlElement(videoDescriptionButton, 'video-description');
100180

101-
videoDescriptionButton.addEventListener('click', function () {
181+
t.videoDescriptionButton = videoDescriptionButton;
182+
t.videoDescriptionClickHandler = function () {
102183
t.options.videoDescriptionToggled = !t.options.videoDescriptionToggled;
103184
mejs.Utils.toggleClass(videoDescriptionButton, 'video-description-on');
104185

105186
t._toggleVideoDescription();
106-
});
187+
};
188+
189+
videoDescriptionButton.addEventListener('click', t.videoDescriptionClickHandler);
107190
},
108191
_loadSourceFromAttribute: function _loadSourceFromAttribute(attribute) {
109192
var t = this;
@@ -174,41 +257,52 @@ Object.assign(MediaElementPlayer.prototype, {
174257

175258
iconSprite: t.options.iconSprite,
176259

177-
fakeNodeName: t.options.fakeNodeName || 'mediaelementwrapper'
260+
fakeNodeName: t.options.fakeNodeName || 'mediaelementwrapper',
261+
262+
hideScreenReaderTitle: true
178263
});
179264

180-
t.audioDescription.node.addEventListener('canplay', function () {
265+
t.audioDescriptionCanplayHandler = function () {
181266
return t.options.audioDescriptionCanPlay = true;
182-
});
183-
t.media.addEventListener('play', function () {
267+
};
268+
t.audioDescriptionPlayHandler = function () {
184269
return t.audioDescription.node.play().catch(function (e) {
185270
return console.error(e);
186271
});
187-
});
188-
t.media.addEventListener('playing', function () {
272+
};
273+
t.audioDescriptionPlayingHandler = function () {
189274
return t.audioDescription.node.play().catch(function (e) {
190275
return console.error(e);
191276
});
192-
});
193-
t.media.addEventListener('pause', function () {
277+
};
278+
t.audioDescriptionPauseHandler = function () {
194279
return t.audioDescription.node.pause();
195-
});
196-
t.media.addEventListener('waiting', function () {
280+
};
281+
t.audioDescriptionWaitingHandler = function () {
197282
return t.audioDescription.node.pause();
198-
});
199-
t.media.addEventListener('ended', function () {
283+
};
284+
t.audioDescriptionEndedHandler = function () {
200285
return t.audioDescription.node.pause();
201-
});
202-
t.media.addEventListener('timeupdate', function () {
286+
};
287+
t.audioDescriptionTimeupdateHandler = function () {
203288
var shouldSync = Math.abs(t.currentTime - t.audioDescription.node.currentTime) > 0.35;
204289
var canPlay = t.options.audioDescriptionCanPlay;
205290
if (shouldSync && canPlay) t.audioDescription.node.currentTime = t.currentTime;
206-
});
291+
};
292+
293+
t.audioDescription.node.addEventListener('canplay', t.audioDescriptionCanplayHandler);
294+
t.media.addEventListener('play', t.audioDescriptionPlayHandler);
295+
t.media.addEventListener('playing', t.audioDescriptionPlayingHandler);
296+
t.media.addEventListener('pause', t.audioDescriptionPauseHandler);
297+
t.media.addEventListener('waiting', t.audioDescriptionWaitingHandler);
298+
t.media.addEventListener('ended', t.audioDescriptionEndedHandler);
299+
t.media.addEventListener('timeupdate', t.audioDescriptionTimeupdateHandler);
207300

208301
if (t.options.isVoiceover) {
209-
t.media.addEventListener('volumechange', function () {
302+
t.audioDescriptionVolumechangeHandler = function () {
210303
return t.audioDescription.node.volume = t.node.volume;
211-
});
304+
};
305+
t.media.addEventListener('volumechange', t.audioDescriptionVolumechangeHandler);
212306
} else {
213307
var volumeButtonClass = t.options.classPrefix + 'volume-button';
214308
var videoVolumeButton = t._getFirstChildNodeByClassName(t.controls, volumeButtonClass);

0 commit comments

Comments
 (0)