Wordpress native "playlist" shortcode. Next and Prev there are but with no icons. How to fix?

Question

If I use on my Wordpress 4.0 the beautiful playlist shortcode I don't see the famous "Next" and "Prev" icons, but only this code in my Html code:

<div class="wp-playlist-next"></div>

and

<div class="wp-playlist-prev"></div>

How to display icons to next and prev commands?

Answer 1

in stylesheet:

.wp-playlist-prev{
   width:20px;
   height:20px;
   background-image: url("./theme_images_folder/something_icon.png");
}

same for the next button.

Answer 2

To get them in the bar you could ignore the beautiful WP playlist ones and add your own using mediaelement.js directly, similar to this question.

You basically extend MediaElementPlayer by writing buildXXX functions, and then specify them in the settings features property as an array (along with all the other controls).

The following integrates them into WP by hooking the wp_playlist_scripts action with a priority of 9, early enough hopefully for the extensions of MediaElementPlayer and the WP _wpmejsSettings to kick in before the playlists get created by wp-mediaelement.

(For simplicity dashicons is used here for styling.)

add_action( 'wp_playlist_scripts', function () {
wp_enqueue_style( 'dashicons' );
?>
<style>
.mejs-prev span, .mejs-next span {
    color:#eee; cursor:pointer; display:inline-block; font-family:"dashicons"; margin-top:5px;
}
</style>
<script>
(function ($) {
    if (typeof MediaElementPlayer !== 'undefined' && typeof _wpmejsSettings !== 'undefined') {
        $.extend(MediaElementPlayer.prototype, {
            buildprev: function(player, controls, layers, media) {
                var tracks = $('.wp-playlist-tracks .wp-playlist-item', controls.closest('.wp-playlist'));
                if (tracks.length > 1) {
                    $('<div class="mejs-button mejs-prev-button mejs-prev" >' +
                        '<span class="dashicons dashicons-arrow-left-alt2" title="' + this.options.prevText + '"></span>' +
                    '</div>').appendTo(controls).on('click', function (event) {
                        event.stopPropagation();
                        tracks.each(function (index) {
                            if ($(this).hasClass('wp-playlist-playing') ) {
                                index = (index - 1) % tracks.length;
                                tracks.get(index).click();
                                return false;
                            }
                        });
                    });
                }
            },
            buildnext: function(player, controls, layers, media) {
                var tracks = $('.wp-playlist-tracks .wp-playlist-item', controls.closest('.wp-playlist'));
                if (tracks.length > 1) {
                    $('<div class="mejs-button mejs-next-button mejs-next" >' +
                        '<span class="dashicons dashicons-arrow-right-alt2" title="' + this.options.nextText + '"></span>' +
                    '</div>').appendTo(controls).on('click', function (event) {
                        event.stopPropagation();
                        tracks.each(function (index) {
                            if ($(this).hasClass('wp-playlist-playing') ) {
                                index = (index + 1) % tracks.length;
                                tracks.get(index).click();
                                return false;
                            }
                        });
                    });
                }
            }
        });
        $.extend(_wpmejsSettings, {
            // Put these in the order you want.
            features: ['playpause','current','progress','duration','tracks','volume','fullscreen','prev','next'],
            prevText: <?php echo json_encode( __( 'Previous track' ) ); ?>,
            nextText: <?php echo json_encode( __( 'Next track' ) ); ?>
        });
    }
})(jQuery);
</script>
<?php
}, 9 );