diff --git a/Makefile b/Makefile index 02dcdfe..52ad49c 100644 --- a/Makefile +++ b/Makefile @@ -1,13 +1,5 @@ -PATCH_MEDIAELEMENT=true -PATCH_MEDIAELEMENT_PLUGINS=true - .PHONY: \ all \ - clean \ - clean-css \ - clean-js \ - clean-mediaelement \ - clean-mediaelement-plugins \ depend \ depend-mediaelement \ depend-mediaelement-plugins \ @@ -21,24 +13,6 @@ all: \ css \ 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-node \ depend-mediaelement \ @@ -46,20 +20,14 @@ depend: \ depend-mediaelement: @echo "Preparing dependency \"mediaelement\" ..." - if test "$(PATCH_MEDIAELEMENT)" = "true" ; then \ - 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 + git -C mediaelement reset --hard HEAD + patch -d mediaelement -p1 < patches/mediaelement/01-iconsprite.diff cd mediaelement && grunt depend-mediaelement-plugins: @echo "Preparing dependency \"mediaelement-plugins\" ..." - if test "$(PATCH_MEDIAELEMENT_PLUGINS)" = "true" ; then \ - git -C mediaelement-plugins reset --hard HEAD ; \ - patch -d mediaelement-plugins -p1 < patches/mediaelement-plugins/01-playlist.js.diff ; \ - fi + git -C mediaelement-plugins reset --hard HEAD + patch -d mediaelement-plugins -p1 < patches/mediaelement-plugins/01-playlist.js.diff cd mediaelement-plugins && grunt depend-node: diff --git a/README.md b/README.md index 2cc5a1c..d092d2c 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ Sample inclusions in an HTML document: ``` -Sample instanciation reading playlist entries from a file `./mp3.m3u`: +Sample instanciation: ```html
@@ -41,7 +41,7 @@ Sample instanciation reading playlist entries from a file `./mp3.m3u`: element: '.player', mode: 'm3u', detachable: false, - m3u: './mp3.m3u', + m3u: 'mp3.m3u', loop: true, shuffle: false })}); @@ -49,6 +49,8 @@ Sample instanciation reading playlist entries from a file `./mp3.m3u`: ``` +See also [the demo page](demos/index.html) for several examples. + ## Contributing * See subdirectory [src](./src) for javascript sources, specifically [player.js](src/player.js). diff --git a/demo/autoplay.html b/demo/autoplay.html index bc437b7..9931cfc 100644 --- a/demo/autoplay.html +++ b/demo/autoplay.html @@ -1,4 +1,3 @@ - diff --git a/patches/mediaelement-plugins/01-playlist.js.diff b/patches/mediaelement-plugins/01-playlist.js.diff index dbb4769..e0aeb61 100644 --- a/patches/mediaelement-plugins/01-playlist.js.diff +++ b/patches/mediaelement-plugins/01-playlist.js.diff @@ -1,8 +1,8 @@ diff --git a/src/playlist/playlist.js b/src/playlist/playlist.js -index 82112fb..bf39681 100644 +index 82112fb..fcf4ade 100644 --- a/src/playlist/playlist.js +++ b/src/playlist/playlist.js -@@ -81,10 +81,11 @@ Object.assign(MediaElementPlayer.prototype, { +@@ -81,7 +81,7 @@ Object.assign(MediaElementPlayer.prototype, { player.endedCallback = () => { if (player.currentPlaylistItem < player.listItems.length) { @@ -10,58 +10,4 @@ index 82112fb..bf39681 100644 + player.setSrc(player.playlist[++player.currentPlaylistItem].src); player.load(); setTimeout(() => { -- 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); - + player.play(); diff --git a/patches/mediaelement/02-play-promise.diff b/patches/mediaelement/02-play-promise.diff deleted file mode 100644 index e2dc628..0000000 --- a/patches/mediaelement/02-play-promise.diff +++ /dev/null @@ -1,166 +0,0 @@ -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); - } diff --git a/patches/mediaelement/03-mediaelement.js.diff b/patches/mediaelement/03-mediaelement.js.diff deleted file mode 100644 index 962ac44..0000000 --- a/patches/mediaelement/03-mediaelement.js.diff +++ /dev/null @@ -1,18 +0,0 @@ -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 diff --git a/src/player.js b/src/player.js index 0039395..881b595 100644 --- a/src/player.js +++ b/src/player.js @@ -131,6 +131,7 @@ var MyPlayer = function(_args) { style = styles.join(" "); args.audio = $(``); + console.log("DEBUG: appending audio=", args.audio, " to element=", args.element, " ..."); $(args.element).append(args.audio); }, readId3 = function() {