美化一下wordpress的默认媒体播放器推荐

/* Media Element Player styles */
 
/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
    background-color: #efefef;
}
 
/* Playmejs-time-floater controls */
.mytheme-mejs-container .mejs-button > button {
    background-image: url(images/mejs-controls-dark.svg);
}
 
.mytheme-mejs-container .mejs-time {
    color: #888888;
}
 
/* Progress and audio bars */
 
/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
    background-color: #fff;
}
 
/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
    background-color: rgba(219, 78, 136, 0.075);
}
 
/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
    background: #db4e88;
}
 
/* Reduce height of the progress and audio bars */
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-loaded,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
    height: 3px;
}
 
.mytheme-mejs-container .mejs-time-handle-content {
    top: -6px;
}
 
.mytheme-mejs-container .mejs-time-total {
    margin-top: 8px;
}
 
.mytheme-mejs-container .mejs-horizontal-volume-total {
    top: 19px;
}
 
/* WordPress audio playlist styles */
 
.wp-playlist-light {
    box-shadow: 3px 3px 0 #e2e2e2;
}
 
/* Captions - Track titles / subtitles, time */
.wp-playlist-light .wp-playlist-caption,
.wp-playlist-light .wp-playlist-item-length {
    color: #787878;
}
 
/* Captions - Current track */
.wp-playlist-light .wp-playlist-current-item .wp-playlist-item-title {
    font-size: 16px;
}
 
.wp-playlist-light .wp-playlist-item-album {
    font-style: normal;
}
 
.wp-playlist-light .wp-playlist-item-artist {
    text-transform: none;
    opacity: .8;
}
 
/* Playlist items */
.wp-playlist-light .wp-playlist-item {
    padding: 10px 0;
    border-bottom-color: #efefef;
}
 
.wp-playlist-light .wp-playlist-item:last-child {
    padding-bottom: 0;
}
 
.wp-playlist-light .wp-playlist-playing {
    font-weight: normal;
    border-bottom-color: #db4e88;
}
 
.wp-playlist-light .wp-playlist-item-length {
    top: 10px;
}
 
/*调整优化*/
.mejs-time-float,.mejs-time-float-current,.mejs-time-float-corner{
    border:none ;
    color: #888888; /*设置文字颜色*/
}
.wp-audio-shortcode a,.wp-playlist a{
    border-bottom:none; /*去除主题的a标签全局下划线*/
}

//加载之前新建的my-theme-player.css文件
//判断启用wp-mediaelement才会加载  避免多余的资源请求 
add_action( 'wp_footer', 'ci_theme_footer_scripts' );
 
function ci_theme_footer_scripts() {
    if ( wp_style_is( 'wp-mediaelement', 'enqueued' ) ) {
        wp_enqueue_style( 'my-theme-player', get_template_directory_uri() . '/css/my-theme-player.css', array(
            'wp-mediaelement',
        ), '1.0' );
    }
}
 
//给MediaElementJs播放器添加自定义样式mytheme-mejs-container  用于重写系统自带css
/**
 * Add an HTML class to MediaElement.js container elements to aid styling.
 *
 * Extends the core _wpmejsSettings object to add a new feature via the
 * MediaElement.js plugin API.
 */
add_action( 'wp_print_footer_scripts', 'mytheme_mejs_add_container_class' );
 
function mytheme_mejs_add_container_class() {
    if ( ! wp_script_is( 'mediaelement', 'done' ) ) {
        return;
    }
    ?>
    <script>
        (function() {
            var settings = window._wpmejsSettings || {};
            settings.features = settings.features || mejs.MepDefaults.features;
            settings.features.push( 'exampleclass' );
            MediaElementPlayer.prototype.buildexampleclass = function( player ) {
                player.container.addClass( 'mytheme-mejs-container' );
            };
        })();
    </script>
    <?php
}