BearLabs
FrontendReactMediaelement js

Problem

The mejs-controls.svg needs to be placed to every public directory once the player is used.

Otherwise, the control icons will not show up.

Solution

IconSprite can be specify during player instantiation.

new window.MediaElementPlayer(playerRef.current, {
    features: ['playpause', 'current', 'progress', 
               'duration', 'volume'],
    iconSprite: '/icons/mejs-controls.svg',
    audioWidth: '100%',
    audioHeight: 40,
    startVolume: 0.8,
    success: function (media) {
        if (!mounted) return;
        media.load();
    }
  });

On this page