Merge branch 'master'

# Conflicts:
#	dist/speed/speed.js
#	dist/speed/speed.min.js
#	package-lock.json
#	package.json
#	src/speed/speed.js

I'm not sure that I didn't introduce new bugs though.

Author: nholtman

Gruntfile.js

@@ -119,12 +119,10 @@ module.exports = function (grunt) {
 					'dist/airplay/airplay.css': 'src/airplay/airplay.css',
 					'dist/chromecast/chromecast.css': 'src/chromecast/chromecast.css',
 					'dist/context-menu/context-menu.css': 'src/context-menu/context-menu.css',
-					'dist/jump-forward/jump-forward.css': 'src/jump-forward/jump-forward.css',
 					'dist/loop/loop.css': 'src/loop/loop.css',
 					'dist/playlist/playlist.css': 'src/playlist/playlist.css',
 					'dist/postroll/postroll.css': 'src/postroll/postroll.css',
 					'dist/quality/quality.css': 'src/quality/quality.css',
-					'dist/skip-back/skip-back.css': 'src/skip-back/skip-back.css',
 					'dist/source-chooser/source-chooser.css': 'src/source-chooser/source-chooser.css',
 					'dist/speed/speed.css': 'src/speed/speed.css',
 					'dist/nmgt/nmgt.css': 'src/nmgt/nmgt.css',
@@ -149,12 +147,10 @@ module.exports = function (grunt) {
 					'dist/airplay/airplay.min.css': 'dist/airplay/airplay.css',
 					'dist/chromecast/chromecast.min.css': 'dist/chromecast/chromecast.css',
 					'dist/context-menu/context-menu.min.css': 'dist/context-menu/context-menu.css',
-					'dist/jump-forward/jump-forward.min.css': 'dist/jump-forward/jump-forward.css',
 					'dist/loop/loop.min.css': 'dist/loop/loop.css',
 					'dist/playlist/playlist.min.css': 'dist/playlist/playlist.css',
 					'dist/postroll/postroll.min.css': 'dist/postroll/postroll.css',
 					'dist/quality/quality.min.css': 'dist/quality/quality.css',
-					'dist/skip-back/skip-back.min.css': 'dist/skip-back/skip-back.css',
 					'dist/source-chooser/source-chooser.min.css': 'dist/source-chooser/source-chooser.css',
 					'dist/speed/speed.min.css': 'dist/speed/speed.css',
 					'dist/nmgt/nmgt.min.css': 'dist/nmgt/nmgt.css',

RELEASE.md

@@ -30,12 +30,13 @@ Instructions for the Maintainer
 
   grunt
 
-- add/commit/push all including build/
-
-  git add --all
-  git commit -am "release 4.X.X"
-  git push
+- add/commit/push all including dist/
 
+```
+git add --all
+git commit -am "release 4.X.X"
+git push
+```
 
 **********************
  PREPARING A RELEASE - second step on github.com

changelog.md

@@ -1,5 +1,26 @@
 # Version History
 
+## *5.1.0 (2026/01/30)*
+* `mediaelement` is now a `peerDependency` of this project. This will prevent multiple installations of `mediaelement` in your project.
+### A11Y PLUGIN
+* Demo page was updated with working media assets. Fixes #261
+* Plugin is now cleaned up properly when the player is destroyed.
+
+## *5.0.0 (2024/09/12)*
+### JUMP FORWARD PLUGIN
+#### New Feature: Inline SVG icon for jump forward button
+* Setting `iconSpritePathJumpForward`: This option enables you to define the path to your SVG icon sprite. When specified, it allows for dynamic generation of inline SVG icons, which will be displayed on the jump forward button. Further information can be found [here](docs/jump-forward.md).
+* Important CSS Adjustment: If you're planning to use `iconSpritePathJumpForward` and your current setup includes background icons defined in CSS, you'll need to make a small but crucial update to your CSS file. Please remove any CSS rules that apply background icons to these buttons. This step is necessary to prevent the display of both SVG and background icons simultaneously.
+
+### SKIP BACK PLUGIN
+#### New Feature: Inline SVG icon for skip back button
+* Setting `iconSpritePathSkipBack`: This option enables you to define the path to your SVG icon sprite. When specified, it allows for dynamic generation of inline SVG icons, which will be displayed on the skip back button. Further information can be found [here](docs/skip-back.md).
+* Important CSS Adjustment: If you're planning to use `iconSpritePathSkipBack` and your current setup includes background icons defined in CSS, you'll need to make a small but crucial update to your CSS file. Please remove any CSS rules that apply background icons to these buttons. This step is necessary to prevent the display of both SVG and background icons simultaneously.
+
+## *4.0.1 (2024/09/09)*
+### SPEED PLUGIN
+* Fix always controlling the first player on the page via keyboard when multiple players exist.
+
 ## *4.0.0 (2024/03/11)*
 This release marks a major version update to address and correct previous versioning inaccuracies. The transition from version 3.0.0 to 3.0.1 introduced changes that, upon further review, have been identified as breaking. These changes warranted a more significant version increment to reflect their impact accurately.
 

demo/a11y.html

@@ -3,37 +3,39 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>MediaElement.js 4.2 - Accessibility Plugin</title>
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <title>MediaElement.js 7.0.7 - Accessibility Plugin</title>
+    <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/7.0.3/mediaelementplayer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.7/mediaelementplayer.min.css">
     <link rel="stylesheet" href="../dist/a11y/a11y.css">
-    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="./demo.css">
 </head>
 <body>
     <div id="container">
         <h1>Accessibility Plugin</h1>
-        <p><a href="index.html">Back to Main</a> </p>
+        <p><a href="./index.html">Back to Main</a> </p>
 
         <h2>Video Player (w/o Voice-Over)</h2>
         <div class="media-wrapper">
             <video id="player1" width="750" height="421" controls preload="none" playsinline
-                   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"}]'
-                   data-audio-description='[{"src": "https://video.aktion-mensch.de/magnolia/aktion-mensch_beispiel_audioDescription.mp3", "type": "audio/mp3"}]'
+                   poster="https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/2e7945298d864445b79c120be1eeb87c"
+                   data-video-description='[{"src": "https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/video-kampagne-begegnung-dgs.mp4", "type": "video/mp4"}]'
+                   data-audio-description='[{"src": "https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/72091bbef9494cc6a8da57179d69099c", "type": "audio/x-wav"}]'
             >
-                <source src="https://video.aktion-mensch.de/magnolia/aktion-mensch_beispiel_video.mp4" type="video/mp4" />
-                <source src="https://video.aktion-mensch.de/magnolia/aktion-mensch_beispiel_video.webm" type="video/webm" />
-                <source src="https://video.aktion-mensch.de/magnolia/aktion-mensch_beispiel_video.ogv" type="video/ogg" />
+                <source src="https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/0e7a69b999dc4dad8b632d323909d1a1" type="video/mp4" />
             </video>
+            <button onclick="player.remove()" style="margin: 20px 0">Remove</button>
         </div>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.7/mediaelement-and-player.min.js"></script>
     <script src="../dist/a11y/a11y.js"></script>
     <script>
-        new MediaElementPlayer('player1', {
+        const player = new MediaElementPlayer('player1', {
             features: ['playpause', 'current', 'progress', 'duration', 'volume', 'a11y', 'fullscreen'],
+            iconSprite: 'mejs-controls.svg',
+            iconSpritePathA11y: 'mejs-a11y-icons.svg'
         });
     </script>
 </body>

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>

demo/mejs-jump-forward.svg

@@ -3,15 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>MediaElement.js 3.0 - Multiple Plugins (2)</title>
+    <title>MediaElement.js - Multiple Plugins (2)</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/4.2.6/mediaelementplayer.css">
-    <link rel="stylesheet" href="../dist/jump-forward/jump-forward.css">
-    <link rel="stylesheet" href="../dist/skip-back/skip-back.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.5/mediaelementplayer.css">
     <link rel="stylesheet" href="../dist/speed/speed.css">
     <link rel="stylesheet" href="demo.css">
 </head>
@@ -133,7 +131,7 @@ <h3>API</h3>
             </tbody>
         </table>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelement-and-player.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.5/mediaelement-and-player.min.js"></script>
     <script src="../dist/jump-forward/jump-forward.js"></script>
     <script src="../dist/skip-back/skip-back.js"></script>
     <script src="../dist/speed/speed.js"></script>
@@ -151,4 +149,4 @@ <h3>API</h3>
 	    }
     </script>
 </body>
-</html>
+</html>

demo/mejs-skip-back.svg

@@ -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>