mediaelement
Speed, Jump Forward & Skip Back plugins not showing on Wordpress site
Thank you for this amazing product!
I have tried to implement the audio player on my site, and the basic player does come up. However, the speed, jump forward and skip back plugins do not show up.
I have properly enqueued the scripts and styles, at least so they show up in the developer tool debugger (firefox). I read through the docs and used the demos as guides. I have cleared my browser cache and purged my CDN and website caching to check for changes.
I still just see the basic player (which works great by the way).
Script to call plugins (enqueued):
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', 'volume', 'skipback', 'jumpforward', 'speed'],
});
}
Template embed:
echo '<audio id="Audio-' . get_the_ID() . '" controls style="width:100%">';
echo '<source src="' . get_sub_field('file_download_url') . '" type="audio/mpeg">';
echo '</audio>';
Example page: https://torahthinking.com/the-essence-pnimiyus-of-pesach-part-1/
Any help would be appreciated.
Thank you
One more point that may be important - the source is an MP3 streamed from the PodBean podcast service.
Thank you
Did more research... Seems I didn't add dependencies to the enqueu. Now speed shows up but the speed menu is hidden my the header if the player is on top of the page.
The jump & skip still don't show.
Error: "n.replace is not a function"
Full console below:
error building skipback TypeError columnNumber: 11889 fileName: "https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js line 4 > eval" lineNumber: 12 message: "n.replace is not a function" stack: "[5]</s.t@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:11889\nbuildskipback@https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/skip-back/skip-back.min.js?ver=4.9.4:12:714\nMediaElementPlayer.prototype.buildfeatures@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-migrate.min.js?ver=4.9.4:1:1073\nvalue@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:85703\nMediaElementPlayer.prototype._meReady@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-migrate.min.js?ver=4.9.4:1:690\nsuccess@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:76043\ne@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:19931\nvalue@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:80768\nMediaElementPlayer.prototype.init@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-migrate.min.js?ver=4.9.4:1:492\ne@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:75880\n@https://torahthinking.com/wp-content/themes/genesis-sample-master/js/media_elements_features.js?ver=4.9.4:5:3\nyt</<@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:4:27594\nyt<@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:4:27576\nexecute/<@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:6031\no@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:14222\nr/o.promiseSend@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:13426\nc/</<@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:14400\nr/o.promiseSend@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:13426\nn/c.promiseSend/<@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:12902\ne@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:115\n" __proto__: Object { stack: "", … } mediaelement-migrate.min.js:1:1138 error building jumpforward TypeError columnNumber: 11889 fileName: "https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js line 4 > eval" lineNumber: 12 message: "n.replace is not a function" stack: "[5]</s.t@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:11889\nbuildjumpforward@https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/jump-forward/jump-forward.min.js?ver=4.9.4:12:732\nMediaElementPlayer.prototype.buildfeatures@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-migrate.min.js?ver=4.9.4:1:1073\nvalue@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:85703\nMediaElementPlayer.prototype._meReady@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-migrate.min.js?ver=4.9.4:1:690\nsuccess@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:76043\ne@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:19931\nvalue@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:80768\nMediaElementPlayer.prototype.init@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-migrate.min.js?ver=4.9.4:1:492\ne@https://torahthinking.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1:12:75880\n@https://torahthinking.com/wp-content/themes/genesis-sample-master/js/media_elements_features.js?ver=4.9.4:5:3\nyt</<@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:4:27594\nyt<@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:4:27576\nexecute/<@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:6031\no@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:14222\nr/o.promiseSend@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:13426\nc/</<@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:14400\nr/o.promiseSend@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:13426\nn/c.promiseSend/<@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:12902\ne@https://ajax.cloudflare.com/cdn-cgi/scripts/935cb224/cloudflare-static/rocket.min.js:2:115\n" __proto__: Object { stack: "", … }
And now keyboard controls don't work - only down arrow for lowering volume
@effectivemedia : about the keyboard, I think you might have hit issue fixed by https://github.com/mediaelement/mediaelement/pull/2577 I commited it to master, may I ask you to test if the Keyboard issue is fixed in master ?
Help needed to update wordpress plugin https://github.com/mediaelement/mediaelement/issues/2704
I believe the problem was because it was passing an array and not a string on line 14:
mejs.i18n.en['mejs.time-skip-back'] = ['Skip back 1 second', 'Skip back %1 seconds'];
...to the following function on line 25:
defaultTitle = mejs.i18n.t('mejs.time-skip-back', t.options.skipBackInterval)
So, not sure if this screws other things up, but I got it to work by changing line 14 to:
mejs.i18n.en['mejs.time-skip-back'] = 'Skip back %1 seconds';
...and doing the same for the jump-forward.js file.
This allows both skip-back and jump-forward buttons to show on my WordPress player.
Two caveats:
- If you set the skipBackInterval to 1 second, it will probably display as "1 seconds" in the plural.
- I'm not sure if this breaks the translation. I doubt, but the
i18n.tfunction in mediaelement-and-player.js makes my head hurt, so I didn't look too deeply into it :-)
