I want to put embed media (audio and video) in private pages, WordPress uses MediaElement.js to show them. On basics core pages, medias are displayed correctly but not at all in WPCA private pages.
I think there is a lot of conflicts with MediaElement css and the WP Customer Area CSS (due in particular to WPCA global resets on a lot of HTML tags with “inherit” or “initial” properties value).

Do you have a solution to resolve these conflicts ?

Do I have to deactivate MediaElement.js (which is however used in my other pages and by default in WordPress) ?
Is it possible to ignore WPCA theme styles just on private pages to keep main worpress theme style ?
If not, do i have to overload theme styles and “restyle” all MediaElement players ?
Do you know if a media plugin can resolve it ?

Thank you very much in advance, and have a nice day.
Clément

Since I don’t have any traffic from legacy browsers that doesn’t support html5, I’ve disabled mediaelement.js for now.

Should I find a way to make my theme work correctly with mediaelement.js or I can just keep it that way?

If the answer is to make it work with mediaelement.js, what could be causing the error?

This is the source I have included in my plugin

<video id="wpws-video-player-mep">
	    <source type="video/<?php echo $type ?>" src="<?php echo $type == 'youtube' ? 'https://www.youtube.com/watch?v=' . $url.'&rel=0&showinfo=0' : urldecode($url) ?>">
	</video>
	<script>
	    jQuery(function ($) {
	    $('#wpws-video-player-mep').mediaelementplayer({
                pluginPath: '<?php echo site_url(); ?>/wp-includes/js/mediaelement/',
	        classPrefix: 'mejs-',
	        isClickable: false,
		    enableAutosize: true,
		    stretching: 'responsive',
		    enablePseudoStreaming: true,
		    loop: false,
		    autoRewind: false,
		    enableKeyboard: false,
	        features: ['playpause', 'volume'],
	
	    success: function (mediaElement, domObject) {
	<?php if ($autoplay == 1) { ?>
	        mediaElement.play();
	<?php } ?>
	    },
	    });
	    });

	</script>

Is it possible to track when someone listens to some audio?
So using the native wp_audio_shortcode

Cheers
Andy

With this upgrade, a couple of things must be considered:

1. In order to create themes compatible with it, it is required to add the classPrefix: mejs- in the player configuration, since the latest version of MEJS switched to BEM naming convention, so make sure it is set correctly.

MY QUESTION IS: How do I do the above? I’ve developed WP themes from scratch and have integrated the audio shortcode into my theme so where would I go to change this?

I want to utilize the upgrades. It seems as if I don’t do anything, I’ll get the old audio player? I need direction.

Recently WP 4.8 was released. My assumption with this new release the shortcode: isn’t working anymore producing:

Could you please investigate this for me because it has been working for at least a year for me prior?
Thanks in advance

1. Remove prior files and include new files inside wp-includes/js/mediaelement folder
2. On wp-includes/js/mediaelement/wp-mediaelement.js:
   • Remove lines related to Silverlight (since it’s no longer supported)
   • Change line if (‘flash’ === mejs.pluginType) to if (mejs.rendererName.match(/flash/gi) !== null)
   • Add in the player settings the config element classPrefix: ‘mejs-‘ to support prior class styles, since now uses BEM naming convention.
   • Replace wp-includes/js/mediaelement/wp-mediaelement.min.js with changes specified above.
3. Modify wp-includes/script-loader.php to update the reference to MediaElementJS changing lines:
   • $scripts->add( ‘mediaelement’, “/wp-includes/js/mediaelement/mediaelement-and-player.min.js”, array(‘jquery’), ‘3.0.2’, 1 );
   • $styles->add( ‘mediaelement’, “/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css”, array(), ‘3.0.2’);

Like mentioned above, it’s worth to expand your code as well since the new package supports HLS, M(PEG)-DASH, YouTube, Vimeo, SoundCloud, Facebook and DailyMotion.