tk-sls.de/myplayer
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Compare commits

base: tk-sls.de:acd6a2f475e68a9a0ce82fd4d750ccd123d47132
Branches Tags
tk-sls.de:main
...
compare: tk-sls.de:ad86df44a7a2a1dd699848efc11b47cf1d6aa23c
Branches Tags
tk-sls.de:main

5 Commits
acd6a2f475 ... ad86df44a7

Author SHA1 Message Date
tilt12345678
ad86df44a7 documentation updates 2024-11-13 07:42:01 +01:00
tilt12345678
aaffe70ee7 add target "clean" 2024-11-13 07:41:46 +01:00
tilt12345678
cf91bd87e8 add config variables to mae mejs/plugins patching skippable 2024-11-13 07:35:37 +01:00
tilt12345678
afad271f22 add patches for playlist/play() exception debugging 2024-11-13 07:35:05 +01:00
tilt12345678
dbdfa7585f remove debug logging 2024-11-13 07:34:22 +01:00
7 changed files with 280 additions and 12 deletions
Show Stats Expand all files Collapse all files

40
Makefile
View File

@ -1,5 +1,13 @@
PATCH_MEDIAELEMENT=true
PATCH_MEDIAELEMENT_PLUGINS=true
.PHONY: \ .PHONY: \
all \ all \
clean \
clean-css \
clean-js \
clean-mediaelement \
clean-mediaelement-plugins \
depend \ depend \
depend-mediaelement \ depend-mediaelement \
depend-mediaelement-plugins \ depend-mediaelement-plugins \
@ -13,6 +21,24 @@ all: \
css \ css \
src src
clean: \
clean-css \
clean-js \
clean-mediaelement \
clean-mediaelement-plugins
clean-css:
rm -f dist/css/*.css dist/css/*.svg
clean-js:
rm -f dist/js/*.js
clean-mediaelement:
git -C mediaelement reset --hard HEAD
clean-mediaelement-plugins:
git -C mediaelement-plugins reset --hard HEAD
depend: \ depend: \
depend-node \ depend-node \
depend-mediaelement \ depend-mediaelement \
@ -20,14 +46,20 @@ depend: \
depend-mediaelement: depend-mediaelement:
@echo "Preparing dependency \"mediaelement\" ..." @echo "Preparing dependency \"mediaelement\" ..."
git -C mediaelement reset --hard HEAD if test "$(PATCH_MEDIAELEMENT)" = "true" ; then \
patch -d mediaelement -p1 < patches/mediaelement/01-iconsprite.diff git -C mediaelement reset --hard HEAD ; \
patch -d mediaelement -p1 < patches/mediaelement/01-iconsprite.diff ; \
patch -d mediaelement -p1 < patches/mediaelement/02-play-promise.diff ; \
patch -d mediaelement -p1 < patches/mediaelement/03-mediaelement.js.diff ; \
fi
cd mediaelement && grunt cd mediaelement && grunt
depend-mediaelement-plugins: depend-mediaelement-plugins:
@echo "Preparing dependency \"mediaelement-plugins\" ..." @echo "Preparing dependency \"mediaelement-plugins\" ..."
git -C mediaelement-plugins reset --hard HEAD if test "$(PATCH_MEDIAELEMENT_PLUGINS)" = "true" ; then \
patch -d mediaelement-plugins -p1 < patches/mediaelement-plugins/01-playlist.js.diff git -C mediaelement-plugins reset --hard HEAD ; \
patch -d mediaelement-plugins -p1 < patches/mediaelement-plugins/01-playlist.js.diff ; \
fi
cd mediaelement-plugins && grunt cd mediaelement-plugins && grunt
depend-node: depend-node:

6
README.md
View File

@ -32,7 +32,7 @@ Sample inclusions in an HTML document:
</head> </head>
``` ```
Sample instanciation: Sample instanciation reading playlist entries from a file `./mp3.m3u`:
```html ```html
<div class="player"></div> <div class="player"></div>
@ -41,7 +41,7 @@ Sample instanciation:
element: '.player', element: '.player',
mode: 'm3u', mode: 'm3u',
detachable: false, detachable: false,
m3u: 'mp3.m3u', m3u: './mp3.m3u',
loop: true, loop: true,
shuffle: false shuffle: false
})}); })});
@ -49,8 +49,6 @@ Sample instanciation:
</div> </div>
``` ```
See also [the demo page](demos/index.html) for several examples.
## Contributing ## Contributing
* See subdirectory [src](./src) for javascript sources, specifically [player.js](src/player.js). * See subdirectory [src](./src) for javascript sources, specifically [player.js](src/player.js).

1
demo/autoplay.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<base href="." /> <base href="." />

60
patches/mediaelement-plugins/01-playlist.js.diff
View File

@ -1,8 +1,8 @@
diff --git a/src/playlist/playlist.js b/src/playlist/playlist.js diff --git a/src/playlist/playlist.js b/src/playlist/playlist.js
index 82112fb..fcf4ade 100644 index 82112fb..bf39681 100644
--- a/src/playlist/playlist.js --- a/src/playlist/playlist.js
+++ b/src/playlist/playlist.js +++ b/src/playlist/playlist.js
@@ -81,7 +81,7 @@ Object.assign(MediaElementPlayer.prototype, { @@ -81,10 +81,11 @@ Object.assign(MediaElementPlayer.prototype, {
player.endedCallback = () => { player.endedCallback = () => {
if (player.currentPlaylistItem < player.listItems.length) { if (player.currentPlaylistItem < player.listItems.length) {
@ -10,4 +10,58 @@ index 82112fb..fcf4ade 100644
+ player.setSrc(player.playlist[++player.currentPlaylistItem].src); + player.setSrc(player.playlist[++player.currentPlaylistItem].src);
player.load(); player.load();
setTimeout(() => { setTimeout(() => {
player.play(); - player.play();
+ var _promise = player.play();
+ console.log("play() returned promise at 'player.endedCallback': ", _promise);
}, 200);
}
};
@@ -172,7 +173,17 @@ Object.assign(MediaElementPlayer.prototype, {
player.currentPlaylistItem = this.getAttribute('data-playlist-index');
player.setSrc(this.value);
player.load();
- player.play();
+ var isPlaying = player.media.currentTime > 0 && !player.media.paused && !player.media.ended && player.media.readyState > player.media.HAVE_CURRENT_DATA;
+ if(isPlaying) {
+ console.log("play() at 'inputs[i].addEventListener' not executed, because media is already playing");
+ }
+ else {
+ var _promise = player.play();
+ console.log("play() returned promise at 'inputs[i].addEventListener': ", _promise);
+ _promise.catch((error) => {
+ console.error(error);
+ });
+ }
if (player.isVideo && player.options.autoClosePlaylist === true) {
mejs.Utils.toggleClass(player.playlistLayer, `${player.options.classPrefix}playlist-hidden`);
@@ -224,7 +235,8 @@ Object.assign(MediaElementPlayer.prototype, {
if (player.playlist[--player.currentPlaylistItem]) {
player.setSrc(player.playlist[player.currentPlaylistItem].src);
player.load();
- player.play();
+ var _promise = player.play();
+ console.log("play() returned promise at 'player.prevPlaylistCallback': ", _promise);
} else {
++player.currentPlaylistItem;
}
@@ -249,7 +261,8 @@ Object.assign(MediaElementPlayer.prototype, {
if (player.playlist[++player.currentPlaylistItem]) {
player.setSrc(player.playlist[player.currentPlaylistItem].src);
player.load();
- player.play();
+ var _promise = player.play();
+ console.log("play() returned promise at 'player.nextPlaylistCallback': ", _promise);
} else {
--player.currentPlaylistItem;
}
@@ -312,7 +325,8 @@ Object.assign(MediaElementPlayer.prototype, {
if (playedItems.indexOf(randomItem) === -1) {
player.setSrc(player.playlist[randomItem].src);
player.load();
- player.play();
+ var _promise = player.play();
+ console.log("play() returned promise at 'randomizeCallback': ", _promise);
player.currentPlaylistItem = randomItem;
playedItems.push(randomItem);

166
patches/mediaelement/02-play-promise.diff Normal file
View File

@ -0,0 +1,166 @@
diff --git a/src/js/features/playpause.js b/src/js/features/playpause.js
index 28e87a66..88a71abf 100644
--- a/src/js/features/playpause.js
+++ b/src/js/features/playpause.js
@@ -51,7 +51,8 @@ Object.assign(MediaElementPlayer.prototype, {
play.innerHTML = generateControlButton(t.id, pauseTitle, playTitle, `${t.media.options.iconSprite}`, ['icon-play', 'icon-pause', 'icon-replay'], `${t.options.classPrefix}`);
play.addEventListener('click', () => {
if (t.paused) {
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at 'buildplaypause ... t.paused': ", _promise);
} else {
t.pause();
}
diff --git a/src/js/features/progress.js b/src/js/features/progress.js
index b9cf2b96..07c400f3 100644
--- a/src/js/features/progress.js
+++ b/src/js/features/progress.js
@@ -106,7 +106,8 @@ Object.assign(MediaElementPlayer.prototype, {
// start again to track new time
setTimeout(function() {
- player.play();
+ var _promise = player.play();
+ debug("play() returned promise at 'start again to track new time': ", _promise);
}, 0);
}
}
@@ -144,7 +145,8 @@ Object.assign(MediaElementPlayer.prototype, {
// start again to track new time
setTimeout(function() {
- player.play();
+ var _promise = player.play();
+ debug("play() returned promise at 'start again to track new time (#2)': ", _promise);
}, 0);
}
}
@@ -332,7 +334,8 @@ Object.assign(MediaElementPlayer.prototype, {
*/
restartPlayer = () => {
if (new Date() - lastKeyPressTime >= 1000) {
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at 'restartPlayer': ", _promise);
}
},
handleMouseup = () => {
@@ -343,7 +346,8 @@ Object.assign(MediaElementPlayer.prototype, {
}
if (t.forcedHandlePause) {
t.slider.focus();
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at 't.forcedHandlePause': ", _promise);
}
t.forcedHandlePause = false;
}
@@ -416,7 +420,8 @@ Object.assign(MediaElementPlayer.prototype, {
case 32: // space
if (IS_FIREFOX) {
if (t.paused) {
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at 'IS_FIREFOX ... t.paused': ", _promise);
} else {
t.pause();
}
diff --git a/src/js/player.js b/src/js/player.js
index 0a2a25b2..9091eaf5 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -256,7 +256,8 @@ class MediaElementPlayer {
// override Apple's autoplay override for iPads
if (IS_IPAD && t.node.getAttribute('autoplay')) {
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at 'override Apple's autoplay override for iPads': ", _promise);
}
} else if ((t.isVideo || (!t.isVideo && (t.options.features.length || t.options.useDefaultControls))) && !(IS_ANDROID && t.options.AndroidUseNativeControls)) {
@@ -577,7 +578,8 @@ class MediaElementPlayer {
if (t.getCurrentTime() > 0 && t.currentMediaTime > 0) {
t.setCurrentTime(t.currentMediaTime);
if (!IS_IOS && !IS_ANDROID) {
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at '!IS_IOS && !IS_ANDROID': ", _promise);
}
}
});
@@ -623,7 +625,8 @@ class MediaElementPlayer {
if (!t.isVideo && !t.options.features.length && !t.options.useDefaultControls) {
// force autoplay for HTML5
if (autoplay && isNative) {
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at 'force autoplay for HTML5': ", _promise);
}
if (t.options.success) {
@@ -678,7 +681,8 @@ class MediaElementPlayer {
if (t.paused && pressed) {
t.pause();
} else if (t.paused) {
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at 'else if (t.paused)': ", _promise);
} else {
t.pause();
}
@@ -810,7 +814,8 @@ class MediaElementPlayer {
}
if (t.options.loop) {
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at 't.options.loop': ", _promise);
} else if (!t.options.alwaysShowControls && t.controlsEnabled) {
t.showControls();
}
@@ -904,7 +909,8 @@ class MediaElementPlayer {
// force autoplay for HTML5
if (autoplay && isNative) {
- t.play();
+ _promise = t.play();
+ debug("play() returned promise at 'autoplay && isNative': ", _promise);
}
if (t.options.success) {
@@ -1357,7 +1363,8 @@ class MediaElementPlayer {
layer.addEventListener('click', (e) => {
if (t.options.clickToPlayPause) {
if (t.paused) {
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at 't.options.clickToPlayPause ... t.paused': ", _promise);
} else {
t.pause();
}
@@ -1600,7 +1607,8 @@ class MediaElementPlayer {
;
if (t.paused) {
- t.play();
+ var _promise = t.play();
+ debug("play() returned promise at 't.paused': ", _promise);
} else {
t.pause();
}
diff --git a/src/js/renderers/html5.js b/src/js/renderers/html5.js
index a29484c0..d3040193 100644
--- a/src/js/renderers/html5.js
+++ b/src/js/renderers/html5.js
@@ -142,7 +142,8 @@ const HtmlMediaElement = {
if (index < total && mediaFiles[(index + 1)] !== undefined) {
node.src = mediaFiles[index++].src;
node.load();
- node.play();
+ var _promise = node.play();
+ debug("play() returned promise at 'Reload the source only in case of the renderer is active at the moment': ", _promise);
} else {
mediaElement.generateError('Media error: Format(s) not supported or source(s) not found', mediaFiles);
}

18
patches/mediaelement/03-mediaelement.js.diff Normal file
View File

@ -0,0 +1,18 @@
diff --git a/src/js/core/mediaelement.js b/src/js/core/mediaelement.js
index 20a46b7e..6cc65fd2 100644
--- a/src/js/core/mediaelement.js
+++ b/src/js/core/mediaelement.js
@@ -362,7 +362,12 @@ class MediaElement {
event = createEvent('pause', t.mediaElement);
t.mediaElement.dispatchEvent(event);
}
- t.mediaElement.originalNode.src = (mediaFiles[0].src || '');
+ try {
+ t.mediaElement.originalNode.src = (mediaFiles[0].src || '');
+ }
+ catch(err) {
+ console.log("ERROR: at t.mediaElement.originalNode.src: ", err);
+ }
// At least there must be a media in the `mediaFiles` since the media tag can come up an
// empty source for starters

1
src/player.js
View File

@ -131,7 +131,6 @@ var MyPlayer = function(_args) {
style = styles.join(" "); style = styles.join(" ");
args.audio = $(`<audio id="myplayer" controls="controls" style="${style}" ${autoplay}></audio>`); args.audio = $(`<audio id="myplayer" controls="controls" style="${style}" ${autoplay}></audio>`);
console.log("DEBUG: appending audio=", args.audio, " to element=", args.element, " ...");
$(args.element).append(args.audio); $(args.element).append(args.audio);
}, },
readId3 = function() { readId3 = function() {